目录
概念
1、网页：是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名 为 html）
网页生成制作：由前端人员书写号html文件，然后浏览器打开就能看到网页
2、HTML：超文本标记语言，用来制作网页的一门语言，由标签组成的，比如图片标签链接、视 频链接
3、web标准：主要包括结构、表现、行为三个方面
语法
1.HTML标签是由尖括号包围的关键词，列如<html>
2.HTML标签通常成对出现的，列如：<html>和</html>,我们称之为双标签。标签对中第一个标签是开始标签，第二个是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），列如<br/>，我们称之为单标签。
标签关系：双标签关系可以分为两类：包含标签和并列标签关系
网页开发工具（Visual Studio Code）
1、基本框架Visual Studio Code可以自动生成，基本不需要我们重写
2、<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
3、<html lang="en">告诉浏览器或者搜素引擎这是一个英文网站本页面采取英文来显示
4、<meta charset="UTF-8"/>必须写，采取utf-8来保存文字，如果不写就会乱码，具体原理后面分析
HTML常用标签
1、标题标签<h1>-<h6>
例如：<h1>…………</h1>
2、段落标签和换行标签
<p>文本</p>
<br/>
3、文本格式化标签
加粗<strong></strong>(推荐)或<b></b>
倾斜<em></em>(推荐)或<i></i>
删除线<del></del>(推荐)或<s></s>
下划线<ins></ins>(推荐)或<u></u>
4、<div>和<span>标签
<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的
<div>文本</div> <span>文本</span>
5、图像标签(属性必须写在标签的后面)
<img src="图像url"/>
art 文本 替换文本，图像不能显示的文字
title 文本 提示文本，鼠标放到图像上显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的边框粗细
注意：1、图像标签可以拥有多个属性，必须写在标签名的后面
2、属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开
3、属性采取键值对的格式，即key="value"，属性=“属性值”
路径
相对路径:图片相对于HTML页面的位置，可以分为 1、同一级路径 2、下一级路径 / 3、上一级路径 ../
绝对路径:是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径 符号:\
超链接标签
<a href = "跳转目标" target = " 目标窗口弹出方式">文本或图像</a>
self 默认 blank 新窗口
链接分类
1、外部链接 <a href="http://www.baidu.com"></a>
2、内部链接 <a href ="index.html">百度</a>
3、空链接 <a href="#">首页</a>
4、下载链接：如果href里面地址是一个（文件或压缩包）会下载这个文件
5、网页元素链接
6、锚点链接：当我们点击链接可以快速定位到页面中的位置
锚点链接
1、在链接文本的href属性中，设置属性值为#名字的形式
列如：<a href="#two">第二集</a>
2、找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第二集介绍</h3>
注释标签
<!--文本-->
快捷键：ctrl+/
特殊字符
空格符   < 小于号 &Lt >大于号 > ￥人民币 ¥
& 和号 & 版权 © 注册商标 ® 摄氏度 °
正负号 ± 乘号 × 除号 ÷ 平方2 ²
平方3 ³
表格标签
语法：
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
1、<table></table>是用于定义表格的标签
2、<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3、<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4、字母td指表格数据<table data>,即数据单元格的内容
表头单元格标签
<th>标签表示HTML表格的表头部分(加粗）
<table>
<tr>
<th>姓名</th>
</tr>
</table>表格属性
属性名 属性值
align left、center、right
border 1或“ ”
cellpadding 像素值
cellspacing 像素值
width 像素值或百分比
表格结构标签
1、<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行
2、<tbody></tbody>:用于定义表格的主体，主要用于数据本体
3、以上标签都是放在<table></table>标签中
合并单元格
方式 跨行合并：rowspan"合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格（写合并代码）
1、跨行：最上侧单元格为目标单元格，写合并代码
2、跨列：最左侧单元格为目标单元格，写合并代码
列表标签：
1、有序列表
2、无序列表
3、自定义列表
表格是用来显示数据的，列表是用来布局的，列表最大的特点就是整齐、整洁、有序。它作为布局会更加自由和方便
无序列表
<ul>标签表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>标签定义
语法：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
1.无序列表的各个列表之间没有顺序级别之分，是并列的
2.<ul></ul>中只能嵌套<li></li>直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的
3、<li></li>之间相当于一个容器，可以容纳所有元素
4、无序列表会带有自己的属性，但在实际使用时我们会使用css来设置
有序列表
<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项
语法：
<ol>
<li>列1</li>
<li>列2</li>
</ol>
1.和无序列表差不多
自定义列表
<dl>标签用于定义描述列表（或定义列表），该标签与<dt>(定义项目/名字)和<dd>（描述每一个项目/名字）一起使用
语法：
<dl>
<dt>名词1</dt>
<dd>名词1解析1</dd>
</dl>
表单标签
完整表单：
- 表单域
- 表单控件（也称表单元素）
- 提示信息
表单域：
<form>标签用于定义表单域，以实现用户信息的收集和传递
表单控件：
- input(单标签)：输入标签 <input type=”属性值”>
- select 下拉表单元素
- textarea 文本域元素
语法：
<select>
<option>文本</option>
</select>
<textarea rows=”3” cols=”20”>
文本内容
</textarea>
css主要构成：选择器以及一条或多条声明
1、表签选择器
语法：标签名{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3
}
2、类选择器
.(自定义){
color:值；
}
例：<div class=”red”>变红色</div>
3、id选择器
HTML元素以id属性来设置id选择器，css以“#”来定义
语法：
#id{
属性1：属性值1
}
注意：样式#定义，结构id调用，只能调用一次，别人切莫使用
1、通配符选择器
在css中，通配符选择器用“*”来定义，他表示选取页面中的所有元素（标签）
语法：*{
属性：属性值1；
}
1236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
