HTML
HTML
一、前端
- 网页开发，基于浏览器解释与运行。
- 浏览器
- 按照浏览器引擎和时长份额分五大浏览器：Chrome、Safari、IE/edge、Firefox、Opera
- 浏览器引擎：渲染引擎、解析HTML代码渲染CSS样式、JS引擎、解析JS代码
二、HTML介绍
1. 超文本标记语言
以<>为标志，不同的标签名有不同的含义。主要用于书写页面结构和内容。
2. 标记语言
2.1 标签
标签也称标记或元素，分为双标签和单标签。
双标签：成对出现，有开始有结束
例如：<html></html>
单标签：只有开始，没有结束，可以手动添加/表示闭合
例如：<br>或者<br/>
2.2 标签属性
由属性名和属性值组成，属性值使用""表示。书写在开始标签中，用于说明标签内容或添加额外声明
例：<img src="">、<meta charset="utf-8">
2.3 语法规范
- 标签名不区分大小写，推荐用小写字母
- 如果缺少闭合标签，浏览器会自动补全，影响结构
3. 网页基本结构
创建文件，书写基本结构
<!-- 文档开始 -->
<!doctype html>
<html>
<!-- 文档头部，可以设置字符集、网页标题、网页说明、引入外部资源文件 -->
<head>
<!-- 设置网页的字符集 -->
<meta charset="utf-8">
<!-- 设置网页的标题 -->
<title>我的第二个页面</title>
</head>
<body>
chancey真厉害~！！
</body>
</html>
三、常用标签
1. head
字符集设置、网页标题设置、选项卡图标设置(log)、
2. body
在body中的常用的标签
2.1 标题
<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>
2.2 段落
<p></p>
2.3 普通文本
<label></label>
2.4 格式标签
<span></span>
2.5 图片与超链接
<img src="">图片
图片默认按照原始尺寸显示，调整需要标签属性
标签属性
width/height手动调整图片大小，取像素值，如果某个方向缺省，图片会等比例拉伸
title设置图片标题，鼠标悬停在图片上时的显示
alt设置图片加载失败时的提示文本
<html>
<body>
<img src="https://wx2.sinaimg.cn/bmiddle/005Pn8i9ly1g5s3o5mk9uj31hc0u0ae2.jpg" width="600px" height="300px" title="美女" alt="图片走丢了呢">
</body>
</html>
<a href="">文本超链接
通过用户点击，能够跳转至其他的资源文件
标签属性
href必填，设置目标文件的URL，可以是本地路径也可以是网络路径
target目标文件的打开方法_self在当前窗口打开，可设置为_blank表示新建窗口打开
<a href="https://www.baidu.com/">百度(网络路径)</a><br>
<a href="01.fontTags.html">跳转(本地路径)</a><br>
<a href="01.fontTags.html" target="_blank">跳转(新建窗口打开))</a><br>
herf为空表示刷新，为#表示锚点，javascript:viod(0)表示阻止超链接默认的跳转动作，可以通过JavaScript自定义超链接动作
<a href="">href为空</a><br>
<a href="#">herf为#</a><br>
<a href="javascript:viod(0)">阻值默认的跳转</a><br>
<a href=""><img src=""></a>图片超链接
其本质就是在a标签里面嵌套img标签
<a href="http://www.sina.com"><img src="https://wx2.sinaimg.cn/bmiddle/005Pn8i9ly1g5s3o5mk9uj31hc0u0ae2.jpg" alt=""></a>
2.6 容器标签
<div></div>用于页面结构的划分，结合css实现网页的基本结构和布局
没有css的效果，类似于p标签
2.7 列表
2.7.1 有序列表
order list
<ol><li></li><li></li></ol>
<ol>
<li>Chancey</li>
<li>Waller</li>
<li>Mary</li>
</ol>
2.7.2 无序列表
unorder list
<ul><li></li><li></li></ul>
<ul>
<li>Chancey</li>
<li>Waller</li>
<li>Mary</li>
</ul>
2.7.3 列表嵌套
在列表中嵌套内层列表，常见于下拉菜单，注意使用父子关系的嵌套
<html>
<head>
<title>列表</title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>Chancey</li>
<li>Waller</li>
<li>Mary</li>
</ol>
<ul>
<li>Chancey</li>
<li>Waller</li>
<li>Mary</li>
</ul>
<ul>
<li>Chancey</li>
<ol>
<li>Waller</li>
<li>Mary</li>
</ol>
<li>Waller</li>
<li>Mary</li>
</ul>
</body>
</html>
2.8 表格
通过结构化的行和单元格显示数据或辅助排版
<table></table>外围结构标签
<tr></tr>row表格中的行
<td></td>data 行中的元素
<table border="2px" cellspacing="10px" cellpadding="20px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>小红</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>小明</td>
<td>21</td>
<td>男</td>
</tr>
</table>
外边距：元素边框与边框之间距离cellspacing
内边距：内容框与边框之间的距离cellpadding
单元格合并
属性只能添加在单元格上
跨列合并（横向合并）
colspan=""包含自身在内合并对应值个单元格
跨列合并（纵向合并）
rowspan=""包含自身在内合并对应值个单元格
<tr>
<td colspan="3">姓名</td>
<!-- 删除被合并的单元格-->
</tr>
<tr>
<td rowspan="2">小红</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<!-- <td>小明</!--> -->
<td>21</td>
<td>男</td>
</tr>
</table>
一旦发生单元格合并，删除多余的单元格，保证表结构
表格行分组标签
可以将表格中的若干划分为一组，表示表头、表尾、表格主体。默认情况下，所有的行都会自动加入表格主体中<tbody></tbody>
表头行分组：<thead></thead>
表尾行分组：<tfoot></tfoot>
表格主体：<tbody></tbody>
th标签：与td一样，只是自带加粗居中效果
<table>
<thead>
<tr>
<th>小明</th>
<th>小红</th>
<th>小小</th>
</tr>
</thead>
<tbody>
<tr>
<td>小星</td>
<td>小蒯</td>
<td>小峰</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计</td>
</tr>
</tfoot>
</table>
2.9 表单
采集用户的信息并且提交给服务器
2.9.1 组成
表单元素：负责发送数据
<form action="" method="" enctype="">表单控件</form>
标签属性
action设置数据的提交地址
method数据的提交方式，默认get，涉及二进制数据或加密数据必须使用post
enctype设置数据传输时的编码类型。默认编码类型对应get方式，将数据转换为字符串以键值对的形式拼接在URL后边，携带传输，明文发送；涉及二进制数据提交，必须指定post，同时设置编码类型为"multipart/form-data"表单控件
负责收集用户信息或提交功能、重置、普通按钮
<html>
<head><title>表单</title></head>
<body>
<form action="login" method="GET" enctype="">
文本输入框：<input type="text" name="uname">
密码输入框：<input type="password" name="upwd">
<input type="submit" value="提交">
</form>
</body>
</html>
表单控件
文本框<input type="text">
密码框<input type="password">
标签属性
type指定控件类型，必填
name设置控件名称，跟随数据一起发送，必填
value设置或读取控件的值，其实就是输入框的初始值
palceholder设置输入框的提示文本
maxlength设置可输入的最大字符数
readonly设置输入框只读
单选按钮<input type="radio">
复选按钮<input type="checkbox">
<form action="login" method="GET" enctype="">
<p>用户昵称：<input type="text" name="username" placeholder="请输入用户名" maxlength="10"></p>
<p>用户密码：<input type="password" name="userpass" placeholder="请输入6位密码" max="6"></p>
<p><input type="text" name="userage" value="18"></p>
<p>购买数量：<input type="text" name="count" value="1" readonly></p>
<p>性别选择：
<input type="radio" name="sex" value="man" checked id="boy"><label for="boy">男</label> 
<input type="radio" name="sex" value="woman" id="girl"><label for="girl">女</label></p>
<p><input type="submit" value="提交"></p>
</form>
一组按钮的控件名称必须保持一致，即name值
必须指定控件的值，最终提交给服务器，即value值
设置checked表示默认选中
label for=id来实现控件与文本的绑定（前边的标签指定id之后，在按钮文本左右添加label，并指定for值，即为id）
<html>
<head><title>for测试</title></head>
<body>
<form action="login" method="GET" enctype="">
<p>用户昵称：<input type="text" name="username" placeholder="请输入用户名" maxlength="10"></p>
<p>用户密码：<input type="password" name="userpass" placeholder="请输入6位密码" max="6"></p>
<p>用户年龄：<input type="text" name="userage" value="18"></p>
<p>购买数量：<input type="text" name="count" value="1" readonly></p>
<p>性别选择：
<input type="radio" name="sex" value="man" checked id="boy"><label for="boy">男</label> 
<input type="radio" name="sex" value="woman" id="girl"><label for="girl">女</label></p>
<p>
兴趣爱好：
<input type="checkbox" name="hobby" value="it" id="it"><label for="it">编程</label>
<input type="checkbox" name="hobby" value="game" id="game"><label for="game">游戏</label>
<input type="checkbox" name="hobby" value="sleep" id="sleep"><label for="sleep">睡觉</label>
</p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
