文章目录
一、五大浏览器及其内核
谷歌：blink
火狐：Gecko
IE：Trident
safari：webkit
opera:presto
二、web标准
不是单个标准，是一个集合，包含了结构标准，表现标准，行为标准
结构标准：html
表现标准：css标准
行为标准：js标准
作用：
1、程序员的角度：开发了一套代码，节省了时间与经历。
2、公司的角度：减少成本，减少维护
3、浏览器的角度：方便于搜索引擎找到
三、HTML骨架
<!--
html全称： Hyper Text Markup Language 超文本标记语言
-->
<!--标识这是一个html5文档-->
<!DOCTYPE html>
<!--根标签-->
<html>
<!-- head中主要放置网页的一些属性-->
<head>
<meta charset="utf-8" />
<title>半脱产第一节课</title>
</head>
<!-- 网页中所有的内容都放在主体标签中 -->
<body>
welcome
</body>
</html>
四、HTML标签
1、标签的分类
双标签：
<p>段落</p>
单标签：
<br/> hr img base meta
2、标签的关系
嵌套关系（父子关系）
并列关系（兄弟关系）
3、常用标签
p：段落标签
br：换行标签
hr：分割线标签
hx：标题标签
4、图片标签
<img src="图片的路径" title="鼠标悬浮时的文字" alt="图片为找到时显示的文字" width="宽度" height="高度"/>
5、链接标签
<a href="链接地址"></a>
<!--锚点链接-->
<a href="#article">点这里会跳转到</a>
<p id="article">
这里是要跳转的段落
</p>
<!--页面跳转默认是在当前窗口打开-->
<!--在新的窗口打开-->
<a href="#" target="blank"></a>
<!--使页面默认在新的窗口打开-->
<head>
<base target="blank"/>
</head>
6、注释标签
html注释
<!-- 注释内容 -->
css注释
/**/
js注释
//单行注释
/*
多行注释
*/
7、路径
相对路径
/ 下一级
…/ 上一级
绝对路径
8、列表
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
五、表格
<!-- 表格：用来显示、存储数据的 -->
<!-- 表格标签 table -->
<!-- 行标签 tr -->
<!-- 单元格标签 td -->
<!-- 表格默认没有边框 -->
<!--
表格的属性：
边框属性：border
边框之间的距离：cellspacing
边框与内容之间的距离：cellpadding
宽：width
高：height
位置属性：align center 居中 right 靠右 left 靠左
-->
<table
border="1"
cellspacing="0"
cellpadding="10"
width="600"
height="300"
align="center"
>
<!-- 表格的结构：标题：caption，表头:thead，主体tbody -->
<!-- 标题标签：只能用在table中 -->
<caption>
半脱产班级花名册
</caption>
<!-- 表头用th可以实现加粗居中效果 -->
<!-- 第一行 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!-- 第二行 -->
<tbody>
<tr>
<td>1</td>
<td>泽锋</td>
<td rowspan="2">男</td>
<td>10001</td>
<td rowspan="4">web公共</td>
</tr>
<!-- 第三行 -->
<tr>
<td>2</td>
<td>乾隆</td>
<!-- <td>男</td> -->
<td>10002</td>
<!-- <td>web公共</td> -->
</tr>
<!-- 第四行 -->
<tr>
<td colspan="2">3</td>
<!-- <td>玉叶</td> -->
<td rowspan="2">女</td>
<td>10003</td>
<!-- <td>web公共</td> -->
</tr>
<!-- 第五行 -->
<tr>
<td>4</td>
<td>玉棉</td>
<!-- <td>女</td> -->
<td>10004</td>
<!-- <td>web公共</td> -->
</tr>
</tbody>
</table>
1、合并单元格步骤
1、判断合并方式：跨行还是跨列
2、跨行：rowspan 跨列：colspan
3、把合并的属性写在第一个要合并的单元格
4、把合并数写在对应的属性
5、把多余的单元格注释
2、table布局的缺点是?
a.太深的嵌套,比如table>tr> td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b.灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c代码臃肿,当在table中套用table的时候, 阅读代码会显得异常混乱
d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e.不够语义
六、表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表单</title>
</head>
<body>
<!-- 表单：采集数据、提交数据 -->
<!-- 表单由三部分组成：表单标签，表单域，提交按钮 -->
<!-- 一、表单标签 -->
<!--
action:提交的地址
method：提交的方式 GET POST
name:表单的名字
-->
<form action="https://www.baidu.com" method="GET" name="form1">
<!-- 二、表单域 -->
<!-- 标记标签 作用：当label的for属性的属性值与input的属性值一样时，单机label可以获取焦点 -->
<div>
<label for="user">姓名：</label>
<!-- input控件标签
type:类型 text:文本
value:输入框的值
name:名称
size:输入框的尺寸
-->
<input type="text" id="user" value="张三" name="user" size="40" />
<!-- 获取焦点 当光标再输入框中时，能输入文本时即获取了焦点 -->
</div>
<div>
<label for="pwd">密码：</label>
<!-- 密码框 当type的属性值未password时为密码框 -->
<input type="password" id="pwd" name="pwd" />
</div>
<div>
<!-- 单选框：type="radio" -->
<!-- 当两个单选框的name属性一样时才有单选效果 -->
<input type="radio" name="sex" checked /><span>男</span>
<input type="radio" name="sex" /><span>女</span>
<!-- 默认单选框的值：
1、checked="checked"
2、checked=true
3、checked
-->
</div>
<div>
<!-- 多选框：type="checkbox" -->
<input type="checkbox" checked /><span>打篮球</span>
<input type="checkbox" /><span>打游戏</span>
<input type="checkbox" checked /><span>游泳</span>
<input type="checkbox" /><span>跑步</span>
<input type="checkbox" checked /><span>看美女</span>
<!-- 默认多选框的值：
1、checked="checked"
2、checked=true
3、checked
-->
</div>
<div>
<!-- 选择框 -->
<span>家庭住址：</span>
<!-- 组合标签：类似ul li -->
<select name="address" id="">
<option value="">石家庄</option>
<option value="">沧州</option>
<option value="">邯郸</option>
<option value="">邢台</option>
<option value="" selected>张家口</option>
</select>
<!-- 默认选中：
1、selected="selected"
2、selected=true
3、selected
-->
</div>
<div>
<span>个人名言：</span>
<!-- 多行文本框 -->
<!--
cols:宽度
rows：高度
-->
<textarea rows="5" cols="30">宝剑锋从磨砺出，梅花香自苦寒来</textarea>
</div>
<!-- 重置按钮 -->
<input type="reset" value="我要重新设置" />
<!-- 普通按钮 -->
<input type="button" value="我是一个普通按钮" /><br />
<!-- 提交按钮 -->
<input type="submit" value="把信息提交到百度" />
</form>
</body>
</html>
七、H5新增的语义化标签
1、header 头部标签
2、section 段落标签
3、footer 底部标签
4、nav 导航标签
5、aside 侧边栏标签
6、article 文章标签
7、progress 进度条标签
例子：
<progress max="100" value="50"></progress>
八、H5新增的表单标签
1、新加标签：datalist
<input type="text" list="list01" id = "list">
<datalist id="list01">
<option value="影流之主"></option>
<option value="圣枪游侠"></option>
<option value="山隐之焰"></option>
<option value="赏金猎人"></option>
<option value="曙光女神"></option>
</datalist>
<!--这里datalist的id要和input的list的值保持一致-->
2、新添属性
<!-- 1、placeholder 提示信息 -->
<!-- 2、maxlength:最大长度 -->
<!-- 3、minlength:最小长度 -->
<!-- 4、required: 非空 -->
<!-- 5、autofocus: 自动获取焦点 -->
<!-- 6、autocomplete:off 自动完成关闭，on自动完成打开 -->
<input
type="password"
id="pwd"
name="pwd"
size="20"
placeholder="请输入你的密码"
maxlength="6"
minlength="3"
required
/>
3、新添的type值
<!-- 1、邮箱：email -->
<!-- 2、网址：url-->
<!-- 3、拾色器： color -->
<!-- 4、搜索框 search 在最后面有一个×号可以清除搜索框的内容 -->
<!-- 5、时间：time -->
<!-- 6、日期：date -->
<!-- 7、月份：month -->
<!-- 8、周：week -->
九、H5新增的视频和音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>H5新增的视频和音频</title>
</head>
<body>
<!-- 音频标签：audio -->
<!-- 控件属性 controls 必须有这个才能显示出来 -->
<!-- 循环播放：loop -->
<!-- 默认静音：muted -->
<audio src="media/yang.mp3" controls loop muted></audio>
<audio controls loop>
<source src="media/yang.mp3" />
</audio>
<!-- 视频标签：video -->
<!-- 宽高：width，height -->
<video
src="media/test.mp4"
controls
loop
muted
width="200"
height="300"
></video>
<video controls loop muted width="200" height="300">
<source src="media/test.mp4" />
</video>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
