一.HTNL标签基本结构hr
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
Hello World!
</body>
</html>
注:
<html></html>是页面中最大的标签,称之为根标签
<head></head>文档的头部,注意在head标签中我们必须要设置的标签是title
<title></title>文档的标题,让页面拥有一个属于自己的网页标题
<body></body>文档的主体,元素包含文档的所有内容,页面内容基本都是放到body里的
二.HTML文件内相关标签的含义
1.<!DOCTYPE>文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页
注意:a.<!DOCTYPE>声明位于文档中最前面的位置,处于<html>标签之前
b.<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签
2.lang语言种类,用来显示当前文档的语言
a.en定义为英语
b.zh-CN定义语言为中文
3.字符集(Character set),以便计算机能够识别和存储各种文字
<meta charset="UTF-8">
UTF-8:万国码,基本包含所有国家需要用到的字符
注:上面的语法是必须要写的代码,否则可能会引起乱码
三.标签语义
就是指标签的含义,即这个标签是用来干嘛的。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更加清晰。
四.常用标签
1.标题标签<h1> - <h6>(重要)
h为head的缩写,分为6个等级
标签语义:作为标签使用,并依据重要性递减
特点:加了标题的文字会加粗变大;每个标题独占一行
2.段落和换行标签(重要)
<p>标签用于定义段落,可以将整个网络分为若干个段落
<p>我是一个段落标签</p>
特点:文本在一个段落中会根据浏览器窗口的大小自动换行;段落和段落之间保有空隙
<br />换行标签,强制换行
特点:<br />是单标签;
3.文本格式化标签
文字设置粗体,斜体等效果,使文字以特殊的方式显示
加粗:<strong></strong>或者<b></b>
倾斜:<em></em>或者<i></i>
删除线:<del></del>或者<s></s>
下划线:<ins></ins>或者<u></u>
4.<div>和<span>标签
这两个标签没有语义,它们就是一个盒子,用来装内容的
特点:<div>标签用来布局,但是现在一行只能放一个<div>
<span>标签用来布局,一行上可以多个<span>
5.图像标签和路径(重点)
a.图像标签:在HTML标签中,<img>标签用于定义HTML页面中的图像
<img src = "图像URL" />
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
alt是替换文本,图像显示不出来的时候用文字替换
<img src = "图像URL" alt = "Ayanami"/>
title是提示文本,鼠标放在图像上,显示的文字
width设置图像的宽度
height设置图像的高度
border设置图像边框粗细
6.图像标签
a.图像标签可以拥有多个属性,但必须写在标签后面
b.属性之间不分先后顺序,标签名与属性,属性与属性之间均已空格隔开
c.属性采取键值对的格式,即key = ”value“的格式,属性 = ”属性值“
7.相对路径
同一级路径可直接引用
获取下一级路径问价可用:/
<img src = "images/img.png" />
若要获取上一级文件可用:../
<img src = "../img.png " />
8.超链接标签(重点)
<a>标签用于定义超链接,作用是从一个页面连接到另一个页面
a.语法格式:
<a herf = "转跳目标" target = "目标窗口弹出方式"> 文本或图像 </a>
href:用于指定链接目标的url地址,(必须属性)当标签应用href属性时,它就具有了超链接的功能
target:用于指定链接页面的打开方式,其中_self为默认值(在当前窗口打开),_blank为在新窗口中打开方式
外部链接中href要书写http
<a href = "http://www.baidu.com"> 百度</a>
内部链接,直接链接内部页面名称即可
<a href = "index.html">首页</a>
空连接:如果当时没有确定链接目标时
<a href = "#">首页</a>
下载链接:如果href里面地址是一个文件或压缩包,则会下载这个文件
网页元素超链接:文本,图像,表格,音频,视频等都可以添加超链接
锚点链接:点击链接,可以快速定位到页面中的某个位置
在链接文本href中,设置属性值为#名字的形式
<a href = "#two">第二季</a>
找到目标位置标签,里面添加一个id属性 = 刚才的名字
<h3 id = "two">第二季介绍</h3>
9.注释标签和特殊字符
快捷键:ctrl + / 即可快速注释
特殊字符表示:
空格符: 
小于号:<
大于号:>
10.表格标签基本使用
a.基本语法
<table>
<tr>
<td> 单元格内的文字 </td>
...
</tr>
...
</table>
注:<table>使用于定义表格的标签
<tr>标签用于定义表格中的行,必须嵌套在<table>标签中
<td>标签用于定义表格中的单元格,必须嵌套在<tr>标签中
b.表头单元格<th>,一般位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示
c.表格属性(不常用,后面会使用CSS)
align: 属性值:left,center, right。规定表格相对周围元素的对齐方式
border,1或“”:规定表格单元是否拥有边框,默认为“”,表示没有边框
cellpadding:像素值,规定单元边沿与其内容之间的空白,默认为1
width:像素值或百分比,表格的宽度
cellspacing:像素值,规定单元格之间的空白,默认为2
d.表格结构标签
<thead>标签表示表格的头部区域,<tbody>标签表示表格的主体区域,这样可以更好的分清表格的结构
e.合并单元格
跨行合并:rowspan = "合并单元格个数"
跨列合并:colspan = “合并单元格的个数”
目标单元格(写合并代码):
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码
合并单元格三部曲:
a.先确定是跨行还是跨列合并
b.先找到目标单元格,写上合并方式 = 合并的单元格数量。比如:<td colspan = "2"></td>
c.删除多余的单元格
11.列表标签
a.无序列表(重要)
<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义
无序列表基本语法格式:
<ul>
<li> 列表项1</li>
<li> 列表项2</li>
<li> 列表项3</li>
......
</ul>
注:无序列表的各个列表项中没有顺序级别之分,是并列的;
<ul></ul>中只能嵌套<li></li>,不能直接在<ul>标签中输入其他标签或文字;
<li>与</li>之间相当于一个容器,可以容纳所有元素;
无序列表会带有自己的样式,但在实际使用时,我们会用CSS来设置;
b.有序列表(理解)
<ol>标签用于定义有序列表,列表标签以数字来显示,并且使用<li>
c.自定义列表(重点)
<dl>标签用于定义描述列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
基本语法:
<dl>
<dt>名词1</dt>
<dd> 名词1解释1</dd>
<dd> 名词1解释2</dd>
</dl>
注:<dl>里面只能包含<dt>和<dd>;
<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>
12.表单标签
在HTML中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息三部分组成
a.表单域,一个包含表单元素的区域,<form>标签用于定义表单域,以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action = "url地址" method = “提交方式” name = “表单域名称”>
各种表单元素控件
</form>
常用属性:
action:URL地址
method:get/post,用于设置表单数据的提交方式
name:用于指定表单的名称,以区分同一个页面中的多个表单域
b.表单控件(表单元素)
<input>表单元素,包含一个type属性,根据不同的type属性值,输入字段拥有多种形式(可以是文本字段,复选框,掩码后文本控件,单选按钮,按钮等)
语法格式:
<input type = "属性值" />
type属性的属性值及其描述:
button:定义可点击按钮(多数情况下,通过JavaScript启动脚本)
checkbox:定义复选框(可多选)
file:定义输入字段和“浏览”按钮,供文件上传
hidden:定义隐藏的输入字段
image:定义图像形式的提交按钮
password:定义密码字段,该字段中字符被掩码
radio:定义单选按钮
reset:定义重置按钮,重置按钮会清除表单中的所有数据
submit:定义提交按钮,提交按钮会把表单数据发送给服务器
text:定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符
除type属性之外,其他常用属性:
name:属性值由用户自定义,定义input元素的名称
value:属性值由用户自定义,规定input元素的值
checked:规定此input元素首次加载时应当被选中(在每次打开网页时,默认把此项勾选)
maxlength:规定输入字段中的字符的最大长度
注:name和value是每个表单元素都有的属性值,主要给后台的人员使用;
name表单元素的名字,要求单选按钮和复选框要有相同的name值
c.<label>标签:用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
语法:
<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />
核心:<label> 标签的for属性应当与相关元素的id属性相同
d.<select> 下拉表单元素
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注:在<option>中定义selected = “selected”时,当前项即为默认选项
e.<textarea>文本域标签:
当用户输入内容较多的情况下,可用此标签,用于定义多行文本输入控件
注:cols = “每行中的字符数“, rows = ”显示的行数“。但是在实际开发中不会使用
都是用CSS来改变大小