1.标签关系

2.基本结构标签

<html>                         /!-- html最大，包含head和body，再包含title --/
   <head>
          <title>
          </title>
   </head>
   
   <body>
   </body>
 
</html>

3.网页开发工具

  <!DOCCTYPE html>

表示采取的是html5版本显示网页。必须写在第一行。且不属于html标签，而是文档类型的声明标签

<html lang="en">

lang 语言种类 en定义语言为英语 zh-CN定义语言为中文说明网页是中文网站/英文网站/。。。但中英文照写不误

<meta charset="UTF-8">

用UTF-8显示，不写会出现乱码

4.html常用标签

4.1标签语义

4.2html标题标签

<h1>~<h6>标题标签，h1一级标签最大，h2二级标签次之···
只有6个
每个标题独占一行

4.3段落和换行标签（重要）

<p></p>定义段落，这里面的是一个段落。上下会空一行
<br />换行

4.4文本格式化标签

<strong>加粗</strong>
<b>也是加粗</b>
<em>,<i>都是倾斜
<del>,<s>都是删除线
<ins>,<u>都是下划线

tips:推荐用第一列的

4.5两个特殊标签

<div>，<span>
都没有语义，就是盒子，用来装内容
div是换行的，span是不换行的

4.6图片标签

<img src=“未命名.jpg”/>

alt 替换文本，图像显示不出来的时候显示它的内容

<img src="未命名1.jpg" alt="qatar" title="我是谁" width="500" height="100" border="15"/>

4.8图像标签 img 和路径（重点）

属性

注意： img 可以拥有多个属性，必须写在标签名后面采用键值对 key="value" 的格式。
属性不分前后，谁放前面都行，但用空格分开

五个属性：

alt 替换文本
title 提示标题，鼠标放上面就显示
border 加个边框的宽度
width和height 一般设一个就行，另一个等比例变化。

路径

文件夹就是目录

相对路径：这个文件的位置作为开始，形成一个路径

上一级用../images/img.jpg

同级直接/img.jpg

绝对路径：从顶级目录开始定位，形成的路径

就是电脑里的C：\Users\apple\l.jpg

或者网络地址http:www.baidu.com\l.jpg

4.7超链接标签

<a> 标签可以定义超链接，从一个页面跳到另一个页面

1.连接的语法格式

两个属性 href 和 target

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href 里写url

target=
“ _self "打开的窗口还在这
”_blank"新开个窗口

2.链接分类

①外部链接：用http的

click here

<a href="https://firefox.com/">click here </a>

②内部连接：不用写http

nihao

<a href="../runoob.html" target="_blank">nihao</a>

③ 空连接：#

kong

<a href="#" target="_self">kong</a>

④下载链接：href里面写一个文件或压缩包

下载链接

 <a href="img.zip">下载链接</a>

⑤网页元素链接：网页里的图像，音频，视频，表格等都可添加超链接

 <a href="http://www.baidu.com"><img src="../无标题.png" alt="wowowowo" width="400" /></a>

 <a href="http://www.baidu.com"><img src="../无标题.png" alt="wowowowo" width="400" /></a>

⑥锚点链接：点了之后跳到这页面某个位置，跟目录点了跳转一样

跳转的点

跳转到的点

<a href="#token">跳转的点</a>
<h6 id="token">跳转到的点</h6>

块元素：无论内容多少，该元素独占一行

(p,h1~h6等)

行内元素：内容撑开宽度，行内元素的可以排在一行

(a,strong,em等)

5.html中的注释和特殊字符

5.1注释

<!--这是注释 -->

快捷键 ctrl + /

5.2特殊字符

可以显示在网页中,下面是常用的：

&nbsp;   空格
&lt;         小于号
&gt;        大于号

6.表格标签

一，表格的标签

用来展示数据的，不是用来布局的

table 定义表格的标签

td:列 tr:行

(1,1)	(1,2)
(2,1)	(2,2)

  <table border=1>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>

<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>

属性:

align表示表格靠哪边，靠左还是靠右，

border是否都有边框，1或者"",

cellpadding单元格边沿与内容之间的空白，

cellspacing单元格之间的空白，

width表格的宽度

二，表格的属性

tr 定义表格的行，必须在 table 中，一个 tr 是一行

td（table data)指表格数据，定义表格的单元格，必须在 tr 中

th 表头单元格，表示第一行，加粗显示

thead，tbody，tfoot 让表格框架清晰，直接放就行，thead里放 th 的

三，合并单元格

1.跨行or跨列

2.目标的单元格td 后加跨行 colspan=“n”，跨列 rowspan=“n”，n为合并的个数

3.删除多余的单元格

7. 列表标签

ul 无序列表

ol 有序列表

li 在 ul 或 ol 或 menu 中

有序列表、无序列表里只能放li，不能放别的 ，li 里可以什么都放。  
样式用css做

dl 自定义列表

dl 定义列表，dt 定义项目/名字，dd 描述每一个项目/名字

(dt和dd是兄弟关系)

8.※表单标签form

作用：表单用来收集数据。

分为:表单域(红框子），表单控件，提示信息

表单域：包含表单元素的区域

<form>把它范围内的表单元素信息交给服务器< /form>
< form action="url地址（界面的值送到这里处理）" method="POST或GET方式" name="name1（表单域名称）">

action=跳转的地址

表单控件（表单元素）：

input表单元素 select下拉表单元素 textarea文本域元素

1. input

标签用于收集用户信息

input 的属性：

文本框text：密码password：单选按钮 radio 如何多选一:相同的name 1.2. 多选checkbox 默认显示的内容 value 用value=··· 要默认哪些按钮被按用checked，直接写checked都行最大长度maxlength：最多输入多少个普通按钮button：结合js使用提交按钮submit：按了就提交表单

label标签

label 为input元素定义标注（标签）

-----效果就是按后面的字也会按上按钮-----