三 HTML简介导读
3.1 文档类型声明标签
文件名的后缀一定是html 输入一个感叹号，自动生成基本代码界面
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>
这句代码的意思是 当前页面采取的是HTML5版本来显示网页注意
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
2.<!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签
3.2 lang语言种类
用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页
可以互换使用，定义为英文的文档可以出现中文，同时，定义中文的网站也可以出现英文
这个属性对浏览器和搜索引擎（百度谷歌）等还是有作用的，比如说如果定义为法文网站，跳转到网站界面，会显示是否需要翻译为法语，否则会乱码，显示错误
3.3 字符集
字符集（Character set)是多个字符的集合。以便于计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8"/>charest 常用的值有：GB2312（简体中文）BIG5（繁体中文）GBK（简体中文和繁体中文）和UTF-8,其中 UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：
1.上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量写法统一标准。
3.4 总结
以上三个代码vscode自动生成，基本不需要我们重写
<!DOCTYPE html> 文档类型生命标签，告诉浏览器这个页面采取html5来显示页面
<html lang="en">
告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示
<meta charset="UTF-8"/>必须写，采取UTF-8来保存文字，如果不写就会乱码。四 HTML 常用标签
4.1 标签
<h1> 一级标题</h1> <h1>-<h6>
段落标签
<p>
我是一个段落标签
</p>
换行标签
<br />
是个单标签，单词break的缩写，意为打断换行4.2 文本格式化标签
为文字设置粗体 斜体或下划线等效果，使文字以特殊的方式显示
加粗 <strong></strong> 或 <b></b>
倾斜 <em></em> <i></i>
删除线 <del></del> <s></s>
下划线 <ins></ins> <u></u>
更推荐使用前者4.3 <div 和<span 标签
这两个标签是没有语义的，他们就是一个盒子，用来装内容的
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写，表示分割分区。span意为跨度、跨距
<div></div> 用来布局，一行只能放一个。大盒子。自己单独占一行
<span></span> 用来布局，一行可以放多个，小盒子。4.4 图像标签和路径
<img src ="图像URL"/> src是<img> 标签的必须属性，它用于指定图像文件的路径和文件名 所谓属性 就是属于这个图像标签的特性
运行文件时，一定要记得先保存在运行，否则会显示不出来
<h3>图像标签的使用</h3>
<img src="刘德华.jpg"/>
<h3>alt替换文本 图像显示不出来的时候用文字进行替换：</h3>
<img src="刘.jpg" alt="这是刘德华"/>
<h3>title 提示文本 鼠标放到图像上，显示的文字：</h3>
<img src="刘德华.jpg" alt="这是刘德华" title="这是真的刘德华啊"/>
<h3>width 给图像设置宽度：</h3>
<img src="刘德华.jpg" alt="这是刘德华" title="这是真的刘德华啊" width="500"/>
<h3>height 给图像设置高度：</h3>
<img src="刘德华.jpg" alt="这是刘德华" title="这是真的刘德华啊" width="500" height="700"/>
<h3>height 给图像设置高度：</h3>
<img src="刘德华.jpg" alt="这是刘德华" title="这是真的刘德华啊" height="700"/>
<h3>border 给图像设置边框：</h3>
<img src="刘德华.jpg" alt="这是刘德华" title="这是真的刘德华啊" height="700" border="15"/>
注意点
1图像标签有多个属性，必须写在标签名（img)的后面。
2属性之间不分先后顺序，以空格分开
3属性="属性值"
4.5 路径
1.目录文件夹和根目录
2.路径之相对路径
图片相对于HTML页面的位置
<h3>同一级路径</h3>
<img src="莱昂纳多.jpg"
<h3>下一级路径</h3>
<img src="images1/刘德华.jpg"
<h3>上一级路径</h3>
<img src="../images/张新成.jpg"3.绝对路径
目录下的绝对位置
<h3>绝对路径</h3>
<img src="C:\Users\dell\Desktop\web\images\景甜.jpg">4.6 链接标签
<h4>外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开界面 _blank 新窗口打开界面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>内部链接：网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html"target="_blank">公司简介</a>
<h4>空链接：#</h4>
<a href="#">公司地址</a>
<h4>下载链接:地址链接的是文件.exe 或者是.zip 等压缩包形式</h4>
<a href="img.zip"></a>
<h4>网页元素的链接,在文本照片图像表格音频上添加超链接</h4>
<a href="http://www.baidu.com"><img src="../images/赵丽颖.jpg" /></a>
<h4>锚点链接，我们点击链接，可以快速定位到页面中的某个位置</h4>
<a href="#live">个人生活</a><br/>
<h3 id="live">个人生活</h3>4.7注释和特殊字符
<!--注释语句-->
快捷键 ： ctrl+ /
空格符
大于 >
小于 <五 HTML标签（下） 表格
5.1 表格
表格是用来展示数据的，不是用来布局的
<table>
<tr>
</table>
<td>单元格内的文字</td>
</tr>
</table>
1 <table> </table> 定义表格的标签 2 <tr> </tr> 定义表格中的行，必须嵌套在<table> </table>标签中 3 <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4 字母td指表格数据，即数据单元格的内容
5.2 表头单元格
<th> 表头单元格会加粗居中
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="200">
<!--center 整体居中，border 边框 cellpadding 文字和单元格的边框 cellspacing 单元格之间的空隙
align 对齐方式 -->
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>任嘉伦</td> <td>男</td> <td>58</td></tr>
<tr><td>陈奕迅</td> <td>男</td> <td>32</td></tr>
5.3 头部标签和合并单元格
表格很长的时候可以划分 表格第一行为表格头部 <thead>，其余为表格主体<tbody>
1.跨行合并 rowspan="合并单元格的个数"
2.跨列合并 colspan ="合并单元格的个数"
-
在目标单元格输入代码
-
删除多余的单元格
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="200">
<!--center 整体居中，border 边框 cellpadding 文字和单元格的边框 cellspacing 单元格之间的空隙
align 对齐方式 -->
<tr>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
5.4 列表标签
列表是用来布局的
无序列表 有序列表 和自定义列表
<!-- 无序列表 并列关系 ul中只能放li标签，不能放别的标签和文字-->
<h4>最喜欢的食物 </h4>
<ul>
<li>米饭</li>
<li>面条</li>
<li>饺子</li>
</ul>
<!--有序列表-->
<h4>最喜欢的名字 </h4>
<ol>
<li>小王</li>
<li>小李</li>
<li>小张</li>
</ol>
<!--自定义列表 使用场景-->
<h4>啦啦啦 </h4>
<dl>
<dt>关注我们 </dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
</dl>5.5 表单标签
网页中的表单 生日名字手机号等等
使用表单是为了收集信息
表单域 表单控件（表单元素） 提示信息
<label for="sex">男</label>
<input type="radio"name="sex" id="sex"/>
<!--form 标签用于定义表单域
<form action="url地址" method="提交方式get/post" name="表单域名称">
各种表单元素控件
</form>
-->
<form action="demo.php" method="post" name="name1">
<!--input 输入表单元素 select 下拉表单元素 当用户输入内容较多的情况下，使用textarea文本域元素 ，定义多行文本-->
<!--radio单选框，name是表单元素名字，这里性别单选按钮必须有相同名字name 才能实现多选一
cheakbox 多选框 value主要是给后台人员看的
单选按钮和复选框可以设置cheaked 属性，当页面打开时可以默认选中这个选项-->
<label for="text">用户名： </label> <input type="text" name="username" value="请输入用户名" maxlength="6"><br>
密码： <input type="password" name="password" ><br>
<input type="radio" id="nan" ><label for="nan">男</label>
<input type="radio" id="nv" ><label for="nv" >女</label> <br>
性别： <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked="cheaked">女 <br>
爱好 ： <input type="checkbox" name="hobby" value="羽毛球"checked="cheaked"> 羽毛球 <input type="checkbox" name="hobby"> 篮球
<input type="checkbox" name="hobby"> 足球 <br>
<input type="submit" value="免费注册"> <br>
<input type="reset" value="重新填写">
<input type="button" value="发送手机验证码"><br>
上传文件 <input type="file" ><br>
<!--下拉列表-->
籍贯：
<select>
<option>河北</option>
<option>安徽</option>
<option>河南</option>
<option>山东</option>
</select>
<!-- 当用户输入内容较多的情况下，使用textarea文本域元素 ，定义多行文本-->
今日反馈
<textarea cols="50" rows="5">
请输入反馈
</textarea>
</form>
8294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
