1.浏览器介绍
IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera
浏览器内核
（1）Trident(IE内核)
（2）Gecko(firefox)
（3）webkit(Safari)
（4）Chromium/Blink(chrome)
2.web标准
结构（html）表现（css）行为（js）
万维网联盟（W3C）：一个制定web标准的组织
3.html骨架
<!DOCTYPE html> --告知浏览器用html5文档标准解析
<html>
<head>
<meta charset="UTF-8"> --设置网页的编码为UTF-8
<title>标题</title>
</head>
<body>
主体
</body>
</html>
4.排版标签
标题标签
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
段落标签
<p> 文本内容 </p>
水平线标签
<hr>
换行标签
<br>
5.布局标签
<div>这是块级元素，一个元素单独占一行</div>
<span>这是行内元素，多个元素可以在同一行</span>
6.文本格式化标签
推荐使用（有语义）
<strong>粗体</strong>
<em>斜体</em>
<del>删除线</del>
<ins>下划线</ins>
不推荐使用（无语义）
<b>粗体</b>
<i>斜体</i>
<s>删除线</s>
<u>下划线</u>
7.图像标签img
<img src="图片路径" alt="图片不能加载时显示的文本" title="鼠标悬停时显示的文本" width="宽" height="高">
在项目开发的时候，不要把属性写在html标签里面，而是要写在css文件里面，这样能分离结构和样式，方便后期的开发。
8.链接标签a
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target属性
1、 _blank：在新窗口打开链接页面。
2、 _parent:在上一级窗口中打开链接。
3、 _self： 在当前窗口打开链接,此为默认值，可以省略。
4、 _top： 在浏览器的整个窗口打开链接，忽略任何框架。
补充
base标签放在head里面，定义页面中链接的跳转方式
<base target="目标窗口的弹出方式">
锚点定位（跳转到页面指定位置）
1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
<a href="#two">
2.使用相应的id名标注跳转目标的位置。
<h3 id="two">第2集</h3>
注意事项
1.外部链接需要添加 http://
2.内部链接直接链接内部页面名称即可比如
< a href="index.html"> 首页 </a >
3.当href="#"，点击标签会跳转到当前页面的顶部，如果href=""，则会刷新页面。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
Note: 请始终将正斜杠添加到子文件夹。假如这样书写链接：
href="//www.w3cschool.cn/html"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，
就像这样：href="//www.w3cschool.cn/html/"。
9.特殊字符标签
空格符
10.注释标签
<!-- 注释语句 -->
11.列表标签
无序列表 ul
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表 ol（了解）
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
12.表格 table
<table>
<caption>我是表格标题</caption>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义行（行里面有单元格，先有行，后有单元格）
<td>…</td>：定义列（单元格）
常用属性（后期不再使用，用css代替）
border：设置表格的边框（默认为0）
cellspacing：设置单元格与单元格之间的距离（默认为2）
cellpadding：单元格里面的内容与单元格之间的距离
width：宽
height：高
align：设置表格在网页中的水平对齐方式
left center right
左 中 右
用css代码替代 cellspacing="0" cellpadding="20"
padding: 20px; --代替cellpadding
padding 属性设置内容与边框的距离
border-spacing：2px; --代替cellspacing
border-spacing 属性设置相邻单元格的边框间的距离
border-collapse : collapse;
collapse： 相邻边被合并 ，会忽略 border-spacing 和 empty-cells 属性
合并单元格
rowspan 跨行合并
colspan 跨列合并
合并的顺序 先上 先左
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。
例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
删除的个数 = 合并的个数 - 1
13.表单标签
表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
1. Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
用于设置表单数据的提交方式，其取值为get或post。
3. name
用于指定表单的名称，以区分同一个页面中的多个表单。
<form>
<input type="text" name="文本输入框">
<input type="password" name="密码输入框">
<input type="radio" name="单选框" checked>
<input type="checkbox" name="复选框" checked>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="" name="图片按钮">
<input type="file" name="文件域">
</form>
属性
name：控件的名称
value：默认文本值
size：默认显示宽度（正整数）
checked：加入的为默认选中的项
maxlength：允许输入的最多字符数
加入disabled则禁用表单控件
label标签（与控件绑定，点击后控件获得焦点）
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控件(文本域)
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option selected>加入selected，当前项即为默认选中项</option>
...
</select>
路径的分类
绝对地址：从盘符或者http://出发去找目标文件的过程就是绝对路径
<img src="http://www.baidu.com/logo.png">
<img src="c:">
相对地址：从当前文件出发去找目标文件的过程就称之为相对路径
如果当前文件和目标文件在同一个文件夹的话，路径直接写目标文件的名称即可
如果当前文件和目标文件不在同一个文件夹，那么需要先找到目标文件对应的文件夹
上一级目录 ../
下一级目录 文件夹名/
H5新增标签（语义化标签）
<header>头部部分</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章页</article>
<section>区块</section>
<footer>底部部分</footer>
H5新增的表单新属性
placeholder 占位文本
autofocus 自动获取焦点
autocomplete 自动补全
required 自动验证表单
H5新增的表单
<input type="range"> 滑块
<input type="date"> 日期控件
<input type="number"> 唤醒数字键盘
多媒体标签
视频标签
<video src="视频路径">
</video>
video标签的常用属性
autoplay 自动播放
controls 播放控件
loop 循环播放
video的格式支持 ogg,MP4,webm 不同的浏览器支持的格式不一样，所以出现了一种兼容写法:前提是准备三种格式的视频文件
<video autoplay>
<source src="视频1.ogg">
<source src="视频1.mp4">
<source src="视频1.webm">
<a href="#">你的浏览器不支持video，点击升级吧</a>
</video>
音频标签
<audio>
<source src="音频1.ogg">
<source src="音频1.mp3">
<source src="音频1.webm">
<a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>
audio标签的常用属性 1.autoplay 自动播放 2.controls 播放控件 3.loop 循环播放
扫一扫
3910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
