这是我参与第五届青训营伴学笔记的第一天
前端html
传达内容，而不是样式
GUI下的人机交互问题
关注的方面
美观 功能 无障碍（各类人群的实用） 安全 性能 兼容性 用户体验
DOM树 每个节点都是一个dom节点
html语法重要的方面
属性值用双引号包裹
某些属性值可以省略
引用标签
blockquote cite="网址"
cite也做引用标签 斜体
q 标签也做引用 字体变成引号
code 引用js代码,也可以声明一个量 pre表示引用多行
**html语义化很重要，对于团队协作很重要 **
如何做到语义化
了解每个标签的属性和含义（wc3标准，或者nba）
思考声明标签最适合
不使用可视化工具生成代码
常用标签
本次课老师主要展示了一些在html中常用的标签
[1]单标签
, 双标签
[2]标题标签
h1-一共有六级标签从h1到h6，标题由小到大
【3】段落标签和换行标签
【4】水平线标签
hr/<!--水平分割线标签-->
【5】 strong
em em-斜体
【6】
&+nbsp；是空格
&+ensp;半角空格（相当于一个英文字符空格）
&+reg;注册符号
&+copy;是版权号标签
sup数学上标(指数)
sub数学下标
【7】图片标签
1.常见的图像格式：JPG，GIF,BMP,PNG
2.基本用法
<img src="E:\images\hetao.jpg" width="160" height="160" alt=""
title=""/>
<!--注意设置一个图片标签要在一个新的段落标签内部，一般我们的文件存放在images文件夹中-->
【8】 超链接标签
1.基本用法
链接文件路径
<!--图像超链接-->
<a href="E:\nginx-1.22.0\html\练习.html\标签1.html" target="_blank"><img src="E:\images\hetao.jpg" alt="菜单"></a>
<!--由a标签的属性href=链接的地址,target指定连接在那个页面打开，
_blank是新建窗口页面打开，_self在自身页面打开，最后面写使用图片链接还是文字链接，这个是图片链接
参照前面图片标签的格式
-->
<p>
<!--文本超链接-->
<a href="E:\nginx-1.22.0\html\练习.html\标签1.html" target="_self">进入菜单页面</a>
<!--这个是文本链接，只要有文字就可以
自己写的页面要到另外一个文件里面复制路径-->
</p>
}
【9】列表，表格，媒体元素
1.列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li><!--<ul></ul>无序列表，每个标签独占一行（块元素），
默认标签项前面有个实心小圆点，<ul></ul>内部只能嵌套li不能嵌套其他标签-->
</ul>
type:设置列表项的符号类型
disc:实心圈
circle:空心圈
square:正方形
<h3>有序列表</h3>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol><!--有序列表，前面是数字，其他的和ul一样-->
<h3>定义列表</h3><!--列表标签是标题及列表项的结合z-->
<dl>
<strong><dt></dt></strong><!--标题标签-->
<em> <dd></dd></em>
<dd></dd><!--列项标签-->
<dt><img src="E:\images\1942.jpg_wh860.jpg"width="120" height="120"title="麻辣烫" alt="麻辣烫"> </dt>
<dd>白菜</dd>
<dd>黄瓜</dd><!--图片放dt,文字放dd-->
</dl><!--定义列表的框架-->
2.表格
<h3>表格</h3>
<table border="2"><!--创建表格的标签，border属性是设置边框宽度，但是这个属性在html5里面已经废除 ,以后会用css来设置表格边框-->
<tr><!--行标签-->
<th>2</th><!--表格标题标签-->
<th>2</th>
<th>2</th>
</tr>
<tr>
<td>1行1列</td><!--列标签-->
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
</table>
<h3>表格的跨行与跨列（合并单元格）</h3>
<table border="1">
<tr>
<td colspan="2">学生成绩</td><!--colspan是td的属性，表示跨列，就是合并列，<td colspan="所跨列数">表格内容</td> -->
</tr>
<table border="2">
<tr>
<td rowspan="2">学生成绩</td><!--rowspan是跨行，语法和colspan一样-->
</tr>
3.媒体元素
<h3>视频播放</h3>
<video controls>
<source src="E:\video\WeChat_20221005163823.mp4"/><!--使用video元素来链接不同的视频文件，浏览器会自动选择一个可识别的格式-->
<!--controls是属性提供播放，暂停的音量控件，可以让视频直接播放-->
<!--width height属性照搬-->
你的浏览器不支持video标签
</video>
<video src="E:\video\WeChat_20221005164547.mp4" controls="'controls" width="" height="" >
你的浏览器不支持video标签
<!--虽然可以直接用video的src的属性链接地址，但是它只能支持一种格式，所以一般不使用video的src，而是使用source-->
</video>
<!--还有一种方式可以让视频播放，使用autoplay属性,当视频加载完成就会自动播放视频-->
<video autoplay>
<source src="E:\video\WeChat_20221005163823.mp4"/>
你的浏览器不支持video标签
</video>
<!--loop属性可以实现视频的循环播放-->
<h3>音频播放</h3>
<!--类似于video，有两种方式一种audio的src属性(只能识别一种音频格式)，一种source的src(自动识别格式)-->
<audio src="E:\audio\要不要买菜 - 多情种.mp3" controls="controls" width="300" height="100" >
你的浏览器不支持video标签
<!--属性的使用和video一样-->
</audio>
<audio controls>
<source src="E:\audio\要不要买菜 - 多情种.mp3"/>
</audio>
<audio autoplay>
<source src="E:\audio\要不要买菜 - 多情种.mp3"/>
</audio>
controls:提供播放、暂停和音量的控件
autoplay:自动播放属性
loop:循环播放
4.结构元素
布局元素
<!--header:头部区域
section：页面的一块独立区域
footer:底部区域
article:独立的文章内容
aside:相关内容或应用（常用于侧边栏）
nav:导航类辅助内容-->
【9】表单
1.表单框架
<body>
<form method="get" action="E:\nginx-1.22.0\html\学习内容笔记.html\表单.html\result.html" >
<!--from常用的属性是method和action
method是指定向服务器发送数据的方法，在里面写post是指以加密的方式提交到服务器，get是在url地址中显示用户提交的数据
action是指定用那个程序处理，在action里面指定提交的地址-->
<p> 名字<input name="name" type="text"/> </p>
<!--input控件标签 name是设置提交到服务器的名字
type可以设置是否可见用户输入的数据（是指在网页页面是否可见）text可见，password不可见
-->
<p> 密码 <input name="password" type="password"> </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Rerset" value="重填" />
</p>
</form>
<!--form是表单控件的框架-->
</body>
<h3>单行文本框:type的text,password属性</h3>
<form method="post" action="" >
<p>
名字<input type="text" value="" name="fname"/></p><!--value是设置文本框中的初始文字-->
<p> 姓氏<input type="text" value="张" name="lname"/></p>
<p>登录名<input type="password" name="sname" size="30" maxlength="20"/>
<!--size是Input的属性，用于设置文本框的长度指的是在文本框在网页中可见的长度，
maxlength是设置输入数据的限定长度-->
</p>
<!--password密码框不能完全保证数据的安全性-->
</form>
<h3>单选框:type的radio属性</h3>
<form >
<input name="gan" type="radio" value="男" checked/>男
<input name="gan" type="radio" value="女"/>女
<!--radio是设置单选框，当设置的name相同时用户才能够只选择一个单选框，
在单选按钮中value的属性值不会出现在用户的界面，只会在提交表单时向服务器传输数据
chacked是设置那个为页面的默认选择-->
</form>
</form>
<h3>复选框:chackbox</h3>
<form method="get" action="E:\nginx-1.22.0\html\学习内容笔记.html\表单.html\result.html">
<input type="checkbox" name="interest" value="sports" />运动
<input type="checkbox" name="headss" value="talk" checked />聊天
<!--checkbox可以设置为相同的name，和单选框同样的value中的值在复选按钮中不显示
checked和单选框一样是设置默认选中-->
</form>
<h3>列表框</h3>
<form method="post"action="" >
出生年月
<input type="text" name="byear" value="yyyy" size="4" maxlength="4"/>年
<select name="bmon" size="13" ><!--select是设置一个列表框，name是设置列表框的名字
size属性是设置用户列表中可同时看见的行数-->
<option value="" >[选择年份]</option><!--option是设置列表框的下拉框的内容，
每个select至少写一个option-->
<option value="1" selected >1月</option><!--和单选框一样，selected是设置默认的下拉框，如果写了selected就默认布尔值为true -->
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>月
<input type="text" name="bday" value="dd" size="2" maxlength="2"/>日
</form>
<h3>按钮</h3>
<form method="post" action="E:\nginx-1.22.0\html\学习内容笔记.html\表单.html\result.html" >
<p>用户名<input name="name" type="text"/> </p>
<p>密 码<input name="password" type="password"/> </p>
<input type="button" name="jbutton" value="保存button" onclick="alert(this.value)" />
<!--普通按钮用于响应onclick事件,后续javaspcript会介绍，点击后会显示value中的内容-->
<input type="submit" name="jsubmit" value="提交submit"/>
<!--submit属性用于提交到服务器-->
<input type="reset" name="jreset" value="重置reset"/>
<!--reset属性用于重置到初始状态清除所有数据-->
<h2>图片按钮</h2>
<p> 输入内容 <input type="taxt" name="name" /> </p>
<input type="image" src="E:\images\下载.jfif"/>
<!--图片按钮在type中设置为image ,在src中写图片链接，虽然没有写sumbit但是仍然具有提交功能-->
<h3>多行文本域</h3>
<p><textarea name="textArea" cols="40" rows="6">
自信，活泼.....
</textarea></p>
<h3>文件域：file</h3>
<p><input type="file" name="file" /> </p>
<!--type的file属性，可以用于上传文件，但是每个浏览器显示的样式不一样，想要同一样式得使用css-->
<input type="submit" name="upload" value="上传" />
<h3>邮件:email</h3>
<p><input type="email" name="email"/> </p>
<!--在type设置email属性，是专门用于输入email文件的文本框，它会自动判断是否为邮箱的有效格式
如果不是就会提示不允许提交-->
<input type="submit" value="提交"/>
<h3>网址:url</h3>
<p>
请输入你的网址： <input type="url" name="userurl"/>
<input type="submit" value="提交"/>
<!--url提供输入网址的文本框，如果输入的文本不符合协议会提示不能提交-->
</p>
<h3>数字：number或者，滑动range</h3>
<p>
<input type="number" name="num" value="0" min="0" max="100" step="2"/>
<input type="submit" />
</p>
<input type="range" name="num" value="50" min="0" max="100" step="1"/>
<input type="submit"/>
<!--number和range都是用于输入数字的只是样式不同，range是滑动的样式，number是文本域的样式
value设置初始值，min，max最小最大值，step是设置输入数字的间隔,不符合要求的数字无法提交
-->
<!--某些浏览器不支持range的属性会显示为文本框，可以放心使用range-->
<h3>搜索框:search</h3>
<p>
请输入搜索的关键字：<br/>
<input type="search" name="搜索" value="请输入.."/><br/>
<input type="submit" value="Go"/>
<!--search是提供搜索框的属性-->
</p>
</form>
superform:
<h3>隐藏域</h3>
<form method="get" action="" >
<p>用户名：<input type="text" name="name"/></p>
<p>密码：<input type="password" name="pass"/></p>
<input type="submit" value="提交"/>
<input type="hidden" value="666" name="urerid"/>
<!--使用type的hidden属性来创建一个隐藏域，是服务器用于区别用户id的-->
</form>
<h3>只读或禁用readonly,disabled</h3><!--直接加在控件里面-->
<form method="get" action="" >
<p>用户名<input type="text" name="name" value="张三" readonly/> </p>
<p>密码<input type="password" name="pass" /> </p>
<p><input type="submit" name="sub" value="修改" disabled/> </p>
<!--readonly是只能看不能改，disabled是禁止使用，有时候是满足什么条件之后才能使用-->
</form>
<h3>表单元素的标记</h3>
<form method="get" action="">
<label for="male">男</label><!--label是标记元素的控件，id是用于链接到label的属性，
在label中设置一个id,然后在控件中设置一个id就可以链接了
链接之后使用就点击label控件的标注文字选中控件了-->
<input type="radio" id="male" name="human" checked/>
<label for="woman">女</label>
<input type="radio" id="woman" name="human"/>
</form>
<form>
<h3>表单的初级验证：大部分都只能用于input标签的文本框类型</h3>
<h2>placeholder:文本框内部的提示</h2>
<input type="search" name="shousuo" placeholder="请输入搜索的关键字"/>
<input type="submit" name="sub" value="Go"/><br/>
<h2>required:提示输入值不能为空</h2>
用户名<input type="text" name="text" required/>
<input type="submit" name="sub" value="提交"/>
<h2>pattern:输入值要符合正则表达式</h2>
<p>电话号码：</p>
<input type="text" name="phonenumber" required pattern="^[358]\d{9}"/>
<input type="submit" name="sub" value="提交"/>
