HTML基础笔记-02
---恢复内容开始---
学习网站：W3School
一、HTML的认识
纯文本语言：只显示内容，不显示样式，也不能描述语义的文档，但是也不会乱码
语义：数据的含义就是语义，数据是符号，在这表示标签
文件格式：txt只保存内容，不显示样式，而doc不仅显示内容，也显示样式，两者在保存相同的内容时，doc的文件占用内存比较大
常见纯文本：记事本、Java、HTML、CSS、JavaScript等
二、 HTML的基础知识点
HTML是负责描述文档语义的一种标记语言
HTML有文本、图片、链接、视频、音乐等
注意：html没有样式，是用来添加语义的排版，实际上就是文本的嵌套使用，而CSS是用来定义样式的
HTML (hyperText Markup Language): 也叫超文本标记语言
超文本：是因为它可以导入超链接，将空间中不同的数据进行连接，所以叫超文本
基本骨架：
<html>
<head>
<meta charset="UTF-8">
<!-- 浏览器的标题 -->
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:文档声明头，声明使用的是html的文档类型 (DocType Declaration)，任何一个标准的HTML页面，第一行一定是文档声明头
我们大多数学的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有淘汰，所以这几年用该还是使用HTML4.01版本来制作网页。
HTML和XHTML的区别：XHTML严格体现在小写标签、闭合、引号
Strict：表示当前模式的要求更加严格，指定有些标签不能使用，如U标签（是指加上下划线的标签，也就是样式，这和HTML就产生了冲突，HTML只负责语义，不负责样式的）
我们使用的一般是Transitional(普通的)的版本，没有严格要求
(U标签：)
基本标签：
<body></body>：里面显示文本、图片内容、链接等网页内容
<h1></h1>一级标题(主标题) <h2></h2>二级标题… h1->h6定义标题语义，显示不同的标题(headline)大小
<p></p>段落。里面的是内容
<a></a> 指向链接
<img src="" alt=“这里用来调用图片失败的识别说明”>图片
<br>换行
字符集（Character Set）：当前计算机不能识别汉字，而是通过二进制来存储编码，计算机记录的实际是根编码
eg： <meta charset="UTF-8"> meta(便签定义)--> 表示“元”，“元”配置 ：表示基础的配置项目
第一种：UTF—8
<meta http-equiv="content-type" content="text/html;charset=utf-8">
第二种：gb2312
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
第三种：gb2312的简写 gbk
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
其中UTF-8全球通用，涵盖了人类的所有语言
Gb2312是国标，是中国的字库，涵盖了汉语和常见的英文
UTF-8中的一个汉字存储3个字节，而gb2312存储两个字节，一般情况下使用的是UTF-8.但是有时在用户体验上要考虑到是否使用国标
2.3关键字和页面描述
mata除了可以设置字符集，还可以设置关键字和页面描述
页面描述（description：描述）
设置页面描述，在百度搜索，可显示当前页面描述的内容，这个技术叫做SEO（SEO：英文Search Engine Optimization， 中文叫“搜索引擎优化”）
eg：<meta name = “名字 ” content =“图片加载失败后显示的提示内容”>
关键字：告诉搜索引擎，这个网页是做什么，提高搜索的效率，让人快速的找到想要的信息，keyword就是“关键字”
保存编码格式：File--> Save With Encoding
CM(Command) ＋ S保存 CM ＋ N新建文件(File--> New) Tab点击出html的各种格式
HTTP协议：也叫超文本传输协议，个人的认识：用于Web浏览器和网站服务器之间的数据传输。它是以明文发送内容，不提供任何形式进行加密，攻击者很容易截取数据信息，可以直接看懂，所以它不适合传如卡号、密码等敏感信息
三、HTML的基本语法
<1、 html对换行（Tab键）、回车以及大小写都不敏感
- <div>这是一个div的盒子！
- <h3>这是一个三级标题</h3>
- <p>这是一个段落</p> </div>
等价于：
- <div>这是一个div的盒子！
- <h3>这是一个三级标题</h3>
- <p>这是一个段落</p>
- </div>
<div></div>存放内容或者嵌套其它标签使用，对换行不敏感
代码规范：<div>标签的嵌套的内容要依次缩进，增强代码的可读性
<2、html的空白折叠效果：html中的文字之间进行空格、换行、tab键都会折叠成一个空格
<3、标签要严格封闭(<>)
HTML、CSS实际上就是写代码，不是真正意义上"编程"，基本上不实现业务逻辑，但是思想和很多内容在编程上是相同的
四、标签的使用
HTML的标签分等级的，有二种类型：容器级、文本级
容器级的标签可以存放任何东西
文本级的标签只能放置文字、图片、表单元素
1、h标签
<h1></h1>一级标题(主标题) <h2></h2>二级标签…<h6></h6>六级标题
h1->h6定义标题语义，显示不同的标题大小 headline
p标签：<p></p>段落(Paragraph) 里面输入的是内容，p里面只能存放文字、图片、表单元素，其他一律不能放
eg：当源代码是
<p>
我是段落
<h1>我是主标题</h1>
</p>
但是在浏览器检查的时候显示的是
<p>
我是段落
</p>
<h1>我是主标题</h1>
<p> </p>
浏览器自己把P标签封闭，不让你去包裹h1
浏览器在p标签中遇到其它标签时，会自动添加</p>进行封闭，在另一个结束标签前面补上开始标签<p>，
3、 img标签
<img>插入图片 img(image：图片) Src (Source: 资源)
eg: <img src="" alt=“1.png”/>
能够插入的图片类型：jpg(jpeg)、gif、png、bmp，不能往网页里面插入的图片格式有：psd、ai
img的标签不需要反标签，是自封闭标签，也叫单标签
如：<img src="1.jpg"/> ，Src是img的标签属性，1.png是属性值(网址或文件路径)
alt属性：alt(altemate : 替代) 图片无法显示的时候，用文字来代替文件（但是有些浏览器不支持）
HTML页面不是直接插入图片的，而是插入引用的地址，所以也要把图片上传到服务器上
如果一直显示不出图片，最直接有效的办法是输入全路径加图片名，但是只能在自己的电脑上能看到，不推荐这样用。
HTML中插入图片，有二个文件，一个html文件，一个jpg文件
我们关心就是当前这二个文件的相对位置，即是这个网站项目，那U盘拷贝给别人，只要相对路径不变，图片就一定能正常显示，图片和html文件要在同一层级上
如果在上一个文件里，要加“../”如果在上二个文件里，就添加“../../”，以此增加或者输入全路径
如果图片在html文件里面，则输入“thml/”
4、a标签超级链接
写法：<a href="" title="这是什么样的title" targe="_blank" >这是一个超链接</a>
一个网站，是由多个html网页组成，html网页键通过超级链接相互跳转，形成一个“网”
如：<a href="08.html" title="这是什么样的title">title属性</a>
target属性
target：目标的意思
如：<a href="08.html" title="这是title" target="_blank ">target属性</a>
blank（空白）：块状的意思，代表新建一个新的空白窗口
如果没有target="_blank "，那么在相同的标签页打开，如果写了target="_blank "，就是在新的空白标签页中打开，并且跳转的标签页还是存在的
5、页面中锚点
锚点：就是一个小小的标记，用来实现页面跳转，不容易被用户察觉
a （anchor） 是"锚"的意思 a标签
title 鼠标悬停时的文本显示
target(属性) 如果有这行代码，就会在新的空白标签页打开，并且在跳转的标签页中还是存在的
页面中的锚点作用：当前内容很多的时候，想直接返回首页，用来跳转页面
如：锚点可以用name和id来设置属性
<a name="BWHL">这是第一个锚点</a>
<a name="second">这是第二个锚点</a>
如何点击跳转（前提是有一个超级链接，指向页面中的锚点，才能在页面内跳转）
<a herf="#BEHL">点击第一个锚点</a> #BEHL就是锚点
<a herf="#second">点击第二个锚点</a>
6、<br>换行标签
7、列表：
它会自动空格，分为：
有序列表：<ol><li>
无序列表：<ul><li>
可以在浏览器中检查代码：检查--> Console，有些浏览器可能不支持，常用的是Chrome和Firefix(有很多实用的插件，个人经常实用Firebug来检查元素)
HTML基础笔记-02的更多相关文章
- 黑马程序员_java基础笔记(02)...java语言基础组成
—————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— java语法(1:关键字,2:标识符,3:注释,4:常量和变量,5:运算符,6:语 ...
- JavaScript基础第02天笔记
JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...
- 《30天自制操作系统》笔记(02)——导入C语言
<30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- ASP.NET Identity 2集成到MVC5项目--笔记02
ASP.NET Identity 2集成到MVC5项目--笔记01 ASP.NET Identity 2集成到MVC5项目--笔记02 继上一篇,本篇主要是实现邮件.用户名登陆和登陆前邮件认证. 1. ...
- Java：并发笔记-02
Java:并发笔记-02 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 3. 共享模型之管程-1 本章内容-1 共享问题 synchronized 线程安全分 ...
- webug4.0 打靶笔记-02【完结】
webug4.0打靶笔记-02 3. 延时注入(时间盲注) 3.1 访问靶场 3.2 寻找注入点 貌似一样的注入点: ?id=1' --+ 3.3 判断输出位置 同前两关一样的位置,时间盲注应该不是这 ...
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
随机推荐
- jQuery in action 3rd - Working with properties, attributes, and data
properties properties 是 JavaScript 对象内在的属性,可以进行动态创建,修改等操作. attributes 指的是 DOM 元素标记出来的属性,不是实例对象的属性. 例 ...
- linux 重新编译低版本gcc
编程实践中,可能会遇到需要较低版本gcc以兼容相应程序的需求,这时就需要我们将系统中默认的gcc版本较低,或者重新编译生成.(UBUNTU12.04下实现gcc4.2.3) 方法1: 对于UBUNTU ...
- ubuntu安装packet提示重复冲突问题
今天装个zip出现: dpkg: error processing archive /var/cache/apt/archives/libc6-dev-i386_2.19-0ubuntu6.5_amd ...
- 客户端JS性能的一些优化的小技巧
下面是一些关于客户端JS性能的一些优化的小技巧:1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;). while().for(in).在这三种循环中 for(in) ...
- Android中<original-package>标签含义
在AndroidManifest.xml中,<original-package>与<manifest package=...>中的区别:<original-package ...
- html+css+javascript实现简易轮播图片
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
- 本人讲课时录制的Android应用开发技术教学视频
网盘地址:http://yun.baidu.com/pcloud/album/info?query_uk=1963923831&album_id=3523786484935252365 本人讲 ...
- nohup
在启动weblogic的时候我们经常看到如下的命令: nohup ./startWebLogic.sh >out.log 2>&1 & 从09年开始用weblogic到现在 ...
- Xamarin.Android之MvvmCross
欢迎大家加入以下开源社区 Xamarin-Cn:https://github.com/Xamarin-Cn Mvvmcross-Cn:https://github.com/Mvvmcross-Cn ...
- 再谈扩展方法，从string.IsNullOrEmpty()说起
string.IsNullOrEmpty()这个方法算得上是.net中使用频率最高的方法之一.此方法是string的一个静态方法,类似的静态方法在string这个类中还有很多.那么这样的方法作为静态方 ...