HTML学习笔记
1，网页
网站：网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特点内容相关的网页集合
网页：网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。网页通常由图片，链接，文字，声音，视频等元素组成
浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Chrome/Opera浏览器内核，Blink其实是Webkit的分支 |
目前国内一般浏览器都会采用Webkit/Blink内核
2，HTML
HTML：超文本标记语言，它是用来描述网页的一种语言，它不是编程语言
HTML标签
页面中最大的标签，我们称为根标签
<html></html>
head标签
文档的头部，注意在head标签中我们必须要设置的标签是title
<head></head>
title标签
文档的标题，让页面有一个属于自己的网页标题
<title></title>
body标签
文档的主体，页面内容基本都是放到body里面的
<body></body>
下面是html文件的骨架
文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页
lang：语言种类，en定义语言为英语，zh-CN定义语言为中文
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
标题标签h1 - h6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
段落标签
p标签
<p></p>
换行标签
br标签
<br />
文本格式化标签
加粗：strong标签和b标签
<strong></strong>
<b></b>
倾斜：em标签和i标签
<em></em>
<i></i>
删除线：del标签和s标签
<del></del>
<s></s>
下滑线：ins标签和u标签
<ins></ins>
<u></u>
div标签和span标签
它们两个是盒子标签，用来装内容
<div></div>
<span></span>
图像标签
img标签
<img src="图像路径" />
- src属性：图像标签的必须属性，用于指定图片的路径
- alt属性：替换文本，图像不能显示时显示的文字
- title属性：提示文本，鼠标放到图像上，显示的文字
- width属性：像素，设置图片宽度
- height属性：像素，设置图片的高度
- border属性：像素，设置图片边框粗细
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
- 属性采取键值对的格式，即 key=value 的格式，属性 = 属性值
超链接标签
a标签，作用是从一个页面链接到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
-
href属性：用于指定链接目标的URL地址，当为标签应用href属性时，它就具有了超链接的功能
-
target属性：用于指定链接页面的打开方式，其中_ self为默认值，_blank为在新窗口打开
-
链接分类：
- 外部链接：
<a href="http://www.baidu.com">百度</a>- 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可
- 空链接：如果当时没有确定链接目标时
<a href="#">首页</a>-
下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件
-
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
-
锚点链接：点击链接可以快速的定位到页面的某个位置
- 在链接文本的href属性中，设置属性值为 #名字 的形式，如：
<a href="#two">第二集</a>- 找到目标位置标签，里面添加一个id属性，值为刚才的名字，如：
<h3 id="two">第二集介绍</h3>
注释标签
<!-- -->
特殊字符
表格标签
表格主要用于显示，展示数据，因为它可以让数据展示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把复杂的数据表现的很有条理
<table>
<tr>
<td></td>
</tr>
</table>
-
table标签是用来定义表格的标签
-
tr标签用来定义表格中的行，必须嵌套在table标签中
-
td标签用来定义表格中的单元格，必须嵌套在tr标签中
-
th标签用来定义表格的表头部分，与td同级
table标签属性：
- align属性：规定表格相对周围元素的对齐方式，值为left，center，right
- border属性：规定表格单元是否拥有边框，默认没有
- cellpadding属性：规定单元边沿与其内容之间的空白，默认1像素
- cellspacing属性：规定单元格之间的空白，默认2像素
- width属性：规定表格的宽度
这些属性一般不会用到，后期采用css来替代
表格结构标签：
因为表格可能很长，为了更好的表示表格的语义，可以将表格分成表格头部和表格主体两大部分
- thead标签：表示表格头部
- tbody标签：表示表格主体
合并单元格
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
列表标签
- 无序列表标签：ul标签，列表项使用li标签定义
<ul>
<li>列表项</li>
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
- ul标签中只能嵌套li标签，直接在ul标签中输入其他标签的做法是不被许可的
- li标签相当于一个容器，可以容纳其他所有标签
- 无序列表会带有自己的样式属性，但在实际使用时，我们使用css来设置
- 有序列表标签：ol标签，列表项使用li标签定义
<ol>
<li>列表项</li>
</ol>
- ol标签只能嵌套li标签
- li标签相当于一个容器，可以容纳其他所有标签
- 有序列表会带有自己的样式属性，但在实际使用时，我们使用css来设置
- 自定义列表标签：dl标签，该标签与dt和dd一起使用
<dl>
<dt></dt>
<dd></dd>
</dl>
- dl标签只能包含dt和dd标签
- 经常是一个dt对应多个dd
表单标签
表单域：
表单域是一个包含表单元素的区域
表单域标签：form标签，实现用户信息的收集和传递
<form action="url地址" method="提交方式" name="表单域名称">
</form>
- action属性：用于指定接收并处理表单数据的服务器程序的URL地址
- method属性：用于设置表单数据的提交方式，取值为get或post
- name属性：用于指定表单域名称，以区分同一个页面的多个表单域
在表单域中可以定义各种表单元素，这些表单元素就是让用户在表单中输入或者选择的内容控件
表单元素标签
-
input标签：输入表单元素，用于收集用户信息
- 语法
<form action="url地址" method="提交方式" name="表单域名称"> <input type="属性值" /> </form>-
属性：
- type属性：设置不同的属性来指定不同的控件类型
- name属性：定义input元素的名称，定义单选按钮时名称要一样
- value属性：规定input元素的值
- checked属性：规定此input元素首次加载时应当被选中
- maxlength属性：规定输入字段字符的最大长度
-
label标签：为input元素定义标注
<form action="url地址" method="提交方式" name="表单域名称">
<label for="sex">男：</label>
<input type="radio" name="sex" id="sex" />
</form>
label标签的for属性和input标签的id属性搭配一起使用
- select标签：下拉表单元素
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
option标签里面定义一个selected="selected"时，默认选中
- textarea标签：文本域元素
<textarea rows="2" cols="20">
文本内容
</textarea>
- cols属性：每行中的字符数
- rows属性：显示的行数
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
