五大浏览器
- IE浏览器
- 火狐浏览器（Firefox）
- 谷歌浏览器 （Chrome） 占比60%左右
- Safari浏览器
- 欧朋浏览器 （Opera）
注意：浏览器的渲染引擎不同，解析出来效果会存在差异
web标准
定义：让不同的浏览器按照相同的标准显示结果，让展示效果统一
web标准的构成
- 结构 HTML 页面元素和内容
- 表现 CSS 页面外观 样式 颜色
- 行为 JavaScript 页面交互
HTML的概念
定义：超文本标记语言 对网页的内容进行描述
HTML的骨架结构
<html> <!-- 网页的整体 -->
<head> <!-- 网页的头部 -->
<title>网页的标题</title>
</head>
<body>
网页的主体
</body>
</html>
标签的结构
<strong>加粗</strong> <开始标签>包裹的内容</结束标签> <!--双标签-->
<br /> <!--单标签-->
注意：单标签自成一体 无法包裹内容
标签的属性
<strong class="one tow"></strong>
class="one" 属性名="属性名"
注意：标签可以存在多个属性 必须以空格分开
标签学习
标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
注意：文字都有加粗 都独占一行
段落标签
<p>我是段落标签</p>
注意：段落和段落之间存在缝隙 并且 独占一行
换行标签 + 水平线标签
<br /> <hr />
<br> <hr>
注意： HTML5之前必须加 / HTML5之后 不用
图片标签
<img src="路径"
alt = "替换文本 图片加载失败显示alt"
title ="提示文本 鼠标悬停显示title"
width ="宽度"
height ="高度" <!--宽和高填一个就会等比例缩放-->
>
路径的介绍
绝对路径
- D:\day01\images\1.jpg （本地链接）
- https://www.baidu.com/logo.gif （网络链接）
相对路径
-
同级目录
-
下级目录
-
上级目录
注意：../指向上查询一个文件夹 多个 ../../../
音频标签
<audio src="路径" controls loop autoplay ></audio>
- controls 显示插件
- loop 循环播放
- autoplay 自动播放 （部分浏览器不支持）
注意：音频标签只支持MP3 ，WAV，Ogg
视频标签
<video src="路径" controls loop autoplay muted></video>
- controls 显示插件
- loop 循环播放
- autoplay 自动播放 （部分浏览器不支持）
- muted 静音自动播放
注意：视频标签只支持MP4，webm，ogg
链接标签
<a href="路径" target="_blank">hhh</a>
- target 链接打开形式
- _self 自身窗口打开
- _blank 新建窗口打开
空链接
<a href="#"></a>
注意 ： 点击之后回到顶部 不确定最终位置 用空连接占位
列表标签
有序列表
<ol>
<li>香蕉</li>
<li>桃</li>
<li>柿子</li>
<li>梨</li>
</ol>
无序列表
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
注意：ul ol 标签里只可以包含 li 标签 ，li标签里可以包含任何内容
自定义列表
<dl>
<dt>标题</dt>
<dd>哈哈哈</dd>
<dd>哈哈哈</dd>
<dd>哈哈哈</dd>
</dl>
注意：dl里面 只可以包含dt dd 标签 ，dt dd 标签中可以包含任何内容
表格标签
表格标签
<table border="1" width="500px" height="500"> <!--表格主体-->
<caption>
<h2>大标题</h2>
</caption>
<tr>
<th>小标题</th>
<th>小标题</th>
<th>小标题</th>
</tr>
<tr> <!--表格行-->
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</table>
- border 边框
- width 宽度
- height 高度
- caption 大标题
表格结构
<table>
<thead>
<tr>
<th>小头部</th>
<th>小头部</th>
<th>小头部</th>
</tr>
</thead>
<tbody>
<tr>
<th>身体</th>
<th>身体</th>
<th>身体</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>底部</th>
<th>底部</th>
<th>底部</th>
</tr>
</tfoot>
</table>
- thead 头部 不受table标签样式限制
- tbody 身体
- tfoot 底部 不受table标签样式限制
合并单元格
- rowspan 跨行合并 上下 方向 删除合并的单元格
- colspan 跨列合并 左右 方向 删除合并的单元格
注意： 不能跨结构 合并
表单标签
文本框
<input type="text" placeholder="占位符" value="默认值" >
密码框
<input type="password" name="password" placeholder="请输入密码">
单选框
性别：<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
复选框
爱好：<input type="checkbox" name="happy"> 抽烟
<input type="checkbox" name="happy"> 吃茶
<input type="checkbox" name="happy"> 赏花
注意：单选框和复选框需要相同的 name 属性 才能实现
checked 默认选中
value 和name
- value 用户输入的内容
- name 当前控件的含义
文件选择
<input type="file" name="file" multiple>
multiple 可以选择多个文件
按钮
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮 配合 js 使用">
注意：按钮需要配合form标签使用
button按钮
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
<button type="button">普通按钮 可以放图片</button>
注意：按钮需要配合form标签使用
下拉框
<select name="city" id="">
<option value="">1</option>
<option value="">2</option>
<option value="" selected>3</option>
<option value="">4</option>
<option value="">5</option>
</select>
- select 标签的整体
- option 下拉菜单的每一项
- selected 默认选中
textarea 文本域标签
<textarea cols="30" rows="10" ></textarea>
- cols 文本可见宽度
- rows 文本可见行数
label标签
<label><input type="radio" name="gender"> 男</label>
<input type="radio" name="gender" id="nv"> <label for="nv"> 女</label>
- 直接用label把内容包裹起来
- 用label包裹文本 在表单添加id属性 label for属性和id属性值一样
语义化标签
<header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>区块</section>
<article>文章</article>
注意：标签和div一致 比div多了语义
字符实体
空格
> 大于号
< 小于号
¥ 元
© 版权
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
