HTML概述
HTML：HyperText Markup Language超文本标记语言
通过html的的标记，告诉了浏览器这部分属于什么内容：例如标题，行内的文字，列表等，从而将“无信息”的文字分割成“具有语义信息”的片段。这些标记文本<p>等起到了描述的作用(比较牛逼)，因此称之为超文本，也称之为标签。目前版本是HTML5：由W3C组织制定(World Wide Web Consortium:专门制定web方面的规范)
必背模板
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我是大帅哥</h1>
</body>
</html>
<meta charset=“utf-8”>:用来指定编码方式；注意，html文档的编码方式，要和meta中设定的编码方式保持一致，否则也会出现乱码的现象。
DTD文档声明
由于HTML有很多的版本，我们需要告诉浏览器我们用的是哪个版本，因此需要DTD文档声明。
每个版本的声明方式不一样。
现在主要以html5的写法为标注，且它是向下兼容的。
<!DOCTYPE html>（写在第一行，不区分大小写，它不是标签是指令）
HTML常用标签标记
标题
<h1>…</h1>: 1级标题
<h2>…</h2>: 2级标题
<h6>…</h6>: 6级标题(一共只有6级标题)
段落
<p>…</p>: 段落标记，用来表示一个段落
<hr/>: 空标记，用来做水平线
<br> : 空标记，用来设置字体换行 ，可以连续使用，连续使用多少个，就换几行。
字体
<i>…</i>: 斜体
<b>…</b>: 加粗
<u>…</u> 给文字增加下划线
<del>…</del> 给文字添加删除线
<sup>…</sup>把文字变成上标(平方之类)
<center>…</center>文字居中显示
字符实体
: 空格
<: 左尖括号(less than)
>: 右尖括号(greater than)
©: copy标记
注意：末尾地；号不能忘记。
<div></div>容器：块元素，独占一行，一个空的div，默认宽度100%，宽度为0
<span></span> 容器：给文本的外围裹了了一层边框，便于给文本增加样式例如，在一个句子里，要给某些特殊的句子添加样式，那就需要用span先包裹一下。
div会独占一行，span不会。div属于容器标签，而span属于文本标签。容器标签可以容纳任何其他标签，而文本标签只能容纳文本/图片/超链接。在企业开发中，一般都是用div或者层级结构(ul-li)作为容器去容纳其他的标签，因此不用特殊记忆哪些是容器标签。
图片
图片是行内元素，不会独占一行。
插入图片：<img src=" "/> src= 显示的是图片的地址
- 属性<img src = " " height = “100px” width=“100px”> 如果只是指定了高度或者宽度，那么会进行等比例缩放。
- 属性：title = ”“ 鼠标划上去提示的文字
- 属性：alt = “” 图片加载失败后的文字
视频/音频
<!--写法一
里面的很多参数具体参考W3C的官方文档
音频只用把video改成audio即可。
-->
<video src="">
<!--写法二
MP4,ogg,webm是浏览器上的三种不同视频格式。
为了解决浏览器地兼容问题。
由于没有一种视频格式是支持所有浏览器地，因此，用下面地方法写出所有地视频格式，那么总有一个版本是可行的。
-->
<video src="">
<source src="" type="videos/webm">
<source src="" type="videos/mp4">
<source src="" type="videos/ogg">
</video>
无序列表
插入一个内缩的列表(无序列表)：
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
- 属性：type = “disc” , " circle", " square" 分表代表实心圆，空心圆，实心方块
有序列表
插入一个内缩的列表(有序列表)：
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
- 属性：type = “1”, “a”, “A”, “i”, “I”，分别表示数字，小写字母，大写字母，小写罗马数字，大写罗马数字
定义列表
<dl>
<dt>北京</dt>
<dd>中国的首都</dd>
<dt>悉尼</dt>
<dd>澳大利亚的首都</dd>
</dl>
其中：dt(definition title)是标题的意思，dt(definition description)是对标题的描述。
超链接
超链接 <a href=“http://www.baidu.com”>超链接的名字 href代表超链接的地址
- target = "_blank"表示在空白页面打开超链接 “_self”表示在当前窗口打开
- alt : 替换文本（插入失败时的提示信息）
- title ： 提示文本 （鼠标移上去时的提示信息）
<base target="_blank">写在head标签中，用来专门统一指定超链接的打开形式
a标签的伪类选择器
- 用来修改标签在不同状态下的样式。a:link/a:visited/a:hover/a:active
- 在企业开发中，编写a标签的伪类选择器最好写在标签选择器的后面
- 在企业开发中，a标签盒子相关的属性写在标签选择器中
- 在企业开发中，a标签文字，背景等相关的属性写在伪类选择器中。
假链接
在实际的网页开发过程中，链接的页面还没有被开发出来，因此需要点击链接的时候暂时不进行跳转。有两种方式可以实现：
<a href="#">超链接哦</a>
<a href="javascript:">超链接哦</a>
//其中：第一种方式可以在点击链接的时候回到页面顶部(很多网站的回到顶部就是这么做的)
锚点链接
在一个页面里进行跳转，例如(回到首页效果)
首先在需要跳转的链接里，加上id=XXX。然后利用如下语句：
<a href="#XXX"></a> //这里的XXX是人为设定的ID。
可以通过这个案例进行更深入的了解
除了在一个页面里进行链接，也可以去到不同的html文件里的某个特定位置。
<a href=“文件所在的路径名#XXX”></a> ，href格式为：目标文件的路径名+“#”+目标对象的ID名即可。
表格
<table>
<tr>
<td> </td>
</tr>
</table>
<!--
注意，上面的写法是一种简易的写法。一个完整的表格应该具有以下四个
caption:指定表格的标题
thead:指定表格的表头信息
tbody:指定表格的主体信息
tfoot:指定表格的附加信息
-->
tr表示有多少行，td表示有多少列
- border = "1px"加上边框
- bordercolor=""颜色
- cellspacing =: 单元格与单元格间的空隙,给table使用
- cellpadding:单元格与内容之间的空隙，给tabel使用
- align：对齐方式 center/left/right
- 如果给tabel加：则是相对周围元素的位置
- 如果给tr加：则是整行改变
- 如果给td加：则是某个单元格进行改变
- valign: 只能给tr和td使用，垂直对齐方式 top/middle/bottom
- width="200px"表示边框的宽度
- height="200px"表示边框的高度(height和width只能给tabel和td使用，如果数值加起来超过总的，会按比例缩放)
- colspan : 所要合并单元格的列数
- rowspan：所要合并单元格的行数
- bgcolor:背景颜色
- <caption>:专门用来设置表格的标题
- 如果把<td></td>换成<th><th>，那么他会变得加粗且居中，这个一般用来当作表格的第一行标题设定
//细线表格（通过背景颜色的落差）
<table bgcolor="black" border="1px" width="200px" height="200px" >
<caption>
标题
</caption>
<tr bgcolor="white" align="center">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white" align="center">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
注意：合并不规格表格，都是在tr保持不变，都是td在做文章。找到需要合并的单元格其实位置，判断是rowspan/colspan，然后进行合并即可。
如下图，可以制作一个不规格的表格：
/*制作不规则表格*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="100px" >
<col width="100px" >
<col width="100px" >
<col width="100px" >
<col width="100px" >
<col width="100px" >
<col width="200px" >
<!-- 也可以这样写
<colgroup span="6" width="100px">
<colgroup span="1", width="200px">
-->
<tr align="center">
<th colspan="7">个人简历</th>
</tr >
<tr align="center" height="40px">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr align="center" height="40px">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr align="center" height="40px">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr align="center" height="40px">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr align="center" height="40px">
<td>求职意向</td>
<td colspan="5"></td>
<td></td>
</tr>
</table>
</body>
</html>
表单
什么是表单？
表单是专门用来收集用户信息的。
所有的表单元素，都应该放在<form>标签中。
表单域：<form name=表单名称 “method=post/get” action=地址>
get请求和post请求：
- get请求通常表示获取数据
- post请求通常用于提交数据
- get请求发送的数据都写在地址栏上(因此适合很小的数据量发送给服务器)
- post请求发送的数据用户不可见
- get请求不能大量提交数据，但post请求可以，因此不要混用
表单样式
- <input type=""> text /password/button/radio/checkbox/ 文本/密码/按钮/单选框/复选框
<!--单选框的用法：
单选框的用法，将type设置成为radio，同时name设置成一样，就能相互区分。
如果想要某个选项一开始打开就被选中，可以设置checked="checked"
-->
男<input type="radio" name="gender" >女<input type="radio" name="gender" checked="checked">保密<input type="radio" name="gender">
<!-- 明文输入框/暗文输入框
-->
明文输入框<input type="text"><br>
暗文输入框<input type="password">
<!--按钮
-->
<!--定义普通的按钮，配合JS完成动画操作-->
<input type="button" value="我是按钮" onclick="alert('Hello World')">
<!--定义图片按钮，配合JS完成动画操作-->
<input type="image", src="" οnclick="alert('Hello world')">
<!--重置文本框中的内容，它有自己默认的按钮标题，也可以通过value属性进行修改-->
<input type="reset">
<!--网页上不会有内容，悄悄咪咪地提交一些输入(随着submit进行提交)-->
<input type="hidden">
<!--将表单中的数据提交到远程的服务器
1.提交到远程的哪个服务器：form标签的action=""
2.哪个数据需要提交，只需要将对应的input标签中设置name属性即可。
-->
<input type="submit"><br>
<form action="http://www.baidu.com">
<input type="text" name="黄"><input type="submit">
</form>
<!--不常用地input type类型
-->
邮件：<input type="email"><br>
网址：<input type="url"><br>
电话：<input type="number"><br>
时间：<input type="date"><br>
颜色：<input type="color"><br>
<input type="submit">
- 下拉菜单：
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳区</option>
<option value="">丰台区</option>
<option value="">东城区</option>
</optgroup>
<optgroup label="昆明">
<option value="">五华区</option>
<option value="">西山区</option>
<option value="">呈贡区</option>
</optgroup>
<optgroup label="杭州">
<option value="">上城区</option>
<option value="">拱墅区</option>
<option value="">萧山区</option>
</optgroup>
</select>
- 下拉菜单2(不常用)
<!--
需要将datalist地id绑定再input地list属性中。
这种下拉菜单还支持手动输入，如果有出现匹配地，会自动弹出
-->
<input type="text" list="city">
<datalist id="city">
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>杭州</option>
</datalist>
- 多行文本框
<textarea cols="10" rows="2">12334342342424234234</textarea>
- label标签
<!--
可以将文本与对应地输入框进行绑定。当点击文本地时候，触发输入框
-->
<label for="age">年龄</label><input type="text" id="age">
一些高级属性：
fileset: 将不同的内容打包成一块，然后单独设置其样式
legend: 为每一个fileset添加一个标题
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
form{
border: 1px red solid;
height: 600px; width: 600px;
margin: 0 auto
}
input,select, textarea{border: 1px black solid;}
fieldset{margin-bottom: 10px;}
p{margin: 10px;}
</style>
</head>
<body>
<form action="" method="post" name="f1">
<fieldset id="">
<legend>个人信息1</legend>
<p>姓名：<input type="text" name="ddd" id="" value="" /></p>
<p>密码：<input type="text" name="ddd" id="" value="" /></p>
</fieldset>
<fieldset id="">
<legend>个人信息2</legend>
<p><input type="submit" id="" value="提交" /><input type="reset" id="" value="重置" /></p>
<p>性别：<label for="male">男</label> <!-- 这里通过label for = "male"（即设定的id名字），将label和空间绑定在了一起。鼠标移动到label上的时候，同样可以勾选单选框。 -->
<input type="radio" name="gender" id="male" value="" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" value="" /></p>
<p>爱好：打游戏<input type="checkbox" name="" id="" value="" />打网球<input type="checkbox" name="" id="" value="" />刷剧<input type="checkbox" name="" id="" value="" /></p>
<p>出生年月：
<select name="">
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
</select>年
<select name="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>月
</p>
<p>个人简介<textarea rows="10" cols="50"></textarea></p>
</fieldset>
</form>
</body>
</html>
marquee标签
<!--网页上一直滚动的文字-->
<marquee direction="left" scrollamount='100' loop=-1 behavior="alternate">滚动的内容</marquee>
<marquee direction="right" >滚动的内容</marquee>
<marquee direction="up" height="200px">滚动的内容</marquee>
<marquee direction="down">滚动的内容</marquee>
<!--
scrollamount='100' 控制滚动的速度
loop=-1表示无限循环，对应的次数表示循环几次
behavior:
slide:碰到边界就暂停
alternate:两边弹
src=""：插入一张图片，让图片滚动
-->
概要标签
<details>
<summary>王力宏</summary>
王力宏（Wang Leehom），1976年5月17日出生于美国纽约罗切斯特，
祖籍中国浙江义乌，华语流行乐男歌手、音乐人、影视演员、导演，拥有威廉姆斯大学和伯克利音乐学院双荣誉博士的学历。1995年发行个人首张专辑《情敌贝多芬》，从而进入演艺圈。1998年凭借专辑《公转自转》获得关注，并于次年凭借该专辑获得第10届台湾金曲奖最佳国语男歌手奖、最佳唱片制作人奖。2004年凭借专辑《不可思议》获得第1 ... >>>
</details>
一些被替代的标签
<!--这里的标签已经不是很常用-->
<b>加粗文本</b>
<u>下划线文本</u>
<i>倾斜文本</i>
<s>删除文本</s>
<hr>
<!--这里的标签比较常用，虽然样式是一样的，但是这里的标签带着明显的语义特征-->
<strong>加粗文本</strong>
<ins>下划线文本</ins>
<em>倾斜文本</em>
<del>删除文本</del>
CSS元素显示模式
块状元素
- 在网页中以块的形式出现，呈现一个矩形的区域。独占一行。所有的容器标签都是块状元素(div ul li ol…)
- 块状元素可以自定义宽，高。或者由子元素撑起 , 如果没有设置宽度，默认和父元素一样宽
- 块状元素一般作为其他元素的容器，可以容纳其他内联元素和块状元素。
内联元素(行内元素)
- 所有的文本标签，除了h标签都是行内元素。内联元素的表现形式是在行内逐个进行显示。
- 内联元素没有自己的形状，不能定义高、宽。默认和内容一样宽
- 内联元素也遵循盒模型规则（看目录）,可以定义padding,border,margin,background，但是个别属性不能正确显示
行内块级元素
- 为了让某些元素不独占一行，又可以设置高度和宽度。
display
三种对应的设置方式：
- block 。不设置宽度时，宽度占满一行。当元素设置了float属性时，就相当于给元素增加了display:block属性。
- inline。不支持宽高，非独占一行。转为行内元素
- inline-block: 既能在一行内显示，又可以设置行高(比较少用，因为可以用float即可)。图片，表单控件都是默认的行内块元素。
- None:不显示了
| 块级 | 块状 | 行内 | 行内块状 |
|---|---|---|---|
| 能否设置宽高 | 可以 | 不可以 | 可以 |
| 是否独占一行 | 是 | 否 | 否 |
| display | block | inline | inline-block |
| 标签 | div ul li… | span u i… | img… |
1593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
