前端 关于HTML的那些事
本篇文章记录的是有关于第一天学习HTML的内容，相应的练习以及自己的一点心得体会。如有不对请指正。
在webstrom中常用的快捷键
| 快捷键： | 作用 |
|---|---|
| ctrl+d | 复制当前行到下一行 |
| ctrl+alt+a+l | 网页格式化 |
| ctrl+/ | 生成多行注释 |
| 字母+tab | 标签快捷写法 |
HTML概念：
HTML(Hypertext Markup Language)又叫做超文本标记语言，它是网页内容的载体。不需编译，由浏览器直接执行。文件的后缀名为html或htm，其中不区分大小写。
HTML基本结构：
<!DOCTYPE HTML> //用来声明文件文档类型
<html lang=”en”> //表明主页语言，en为英文ch为中文
<head> //头部信息，显示网页选项卡区域
<meta charset=”utf-8”> //信息标签，告诉网页内容的语言编码形式
//utf-8最为常用，指简/繁体中文，英日韩文
<title></title> //网页标题，显示在网页上方
</head>
<body>
</body> //显示网页内容
</html>
HTML标签：
-
标题标签：
<h1></h1>~<h7></h7>其中文字加粗，且从h1到h7文字由大到小依次递减并会发生换行。 -
段落标签：
<p></p>具有换行属性，align对齐属性。align的值有：left，right，center，justify等。 -
文本格式化标签：
| 标签 | 作用 |
|---|---|
<em></em>或者<i></i> | 斜体 |
<u></u> | 下划线 |
<del></del> | 删除线 |
<sub></sub> | 下标 |
<sup></sup> | 上标 |
<small></small> | 小号字 |
<strong></strong> | 加粗 |
<pre></pre> | 预定义格式 |
<br/> | 换行标签 |
-
水平线：
<hr/>其属性有width，color，align等。width的单位可为像素px或百分比% -
区块标签：
- 行内元素：
<span></span>专门用来放置文字。 - 块状元素：
<div></div>一般被当做容器使用。
- 行内元素：
-
链接标签：
<a href=”链接路径” >链接文字</a>
注意：链接路径可以为相对路径，也可以为绝对路径和外部路径。相对路径是网页所在地址相对于链接目标的地址，绝对路径是相对于盘幅而言的。外来路径是相对于服务器而言的。利用链接标签的target属性可以实现不同网页的跳转。
eg：
当前页锚标：
<a name=”#abc”></a>也可为：<p id=”abc”></p>
跳转页锚标：
<a href=”http://www.baidu.com” name=”abc”>百度</a> -
图片标签：
<img src=”路径” alt=”加载失败时候显示的文字>也具有align属性 -
列表标签：
分为有序列表和无序列表，其前面前的标号通过type属性可以更改。
有序列表：
<ul>
<li></li>
<li></li>
</ul>
无序列表：
<ol>
<li></li>
<li></li>
</ol>
表单元素：
包含一个表单元素的页面输入数据之后“提交”表单，之后浏览器会将数据打包送给服务器，并由服务器接收数据之后转由程序处理。
语法是：<form></form>
其中的表单可以分为文本域，单选框，多选框，按钮和列表。
-
表单输入标签：input
input的属性type设置其中存放的数据类型。placeholder是用户 输入字段提示内容，name为表单名。
input标签中type的值为：
| type的值 | input存放的数据类型 |
|---|---|
| text | 默认值，存储文本 |
| password | 存储密码，输入的内容用黑色圆点表示 |
| file | 文件域，用于上传图片或文件 |
| checkbox | 复选域，用来制作复选框 |
| radio | 单选域 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 按钮，可自行设置样式 |
注：1、文本域和密码域的value属性的值作为文本框的默认输入值，同时他们有有最大长度maxlength和最小长度属性minlength来控制输入文本的长度。2、同一组单选框的name值要相同。3、单选框和复选框的数据提交之后，服务器读取的是响应的value的值。checked是默认选取值。4、按钮的属性中value的值会被直接显示在按钮上。
例如：<input type="password" placeholder="请输入密码" maxlength="7" name="paw"/>
-
文字域标签 textarea：
一般用来输入大段文字，其中的row和col是设置其表现长 宽的。
<select></select>下拉菜单，与option组合使用。value的值最终传给服务器。·
例如：
<select>
<option>--请选择--</option>
<option value="veg">蔬菜</option>
<option value="fruit">水果</option>
<option value="jf">膨化食品</option>
</select>
-
表单元素的一些重要属性：
action属性设定提交路径。method属性值为delete 删除操作；update 修改操作；insert 插入操作；
注意：method提交方式分为：get 显式提交，传输数据量小，受URL限制。post 隐式提交，提交数据量大。一般默认为get。
表格：
-
表格结构：
table-tr-td三级使用。table为总表，tr为行，td为列,caption为表头标题，th同tr为一个等级，只用于表头，加粗显示。
<table>
<option>这里是标题</option>
<thead>
<tr>
<td>表头一</td>
<td>表头二</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
-
表格属性：
1）border 边框属性；bordercolor 为边框颜色属性；background 可以给表格设置背景；
2） width和height为宽和高属性，单位为px或%;
3）cellspacing 单元格之间的空隙，单位为px或%；cellpadding 单元边沿与其内容之间的空隙。
4）bgcolor 单元格背景色，其值可为三种类型rgb（a,b,c）或者#六位十六进制数或者color-name。带透明度的背景叫：rgba（a,b,c,d）【这里的abcd都为0-255的数字】。
5)align 行内容的的水平对齐方式；valign 行内容的垂直对其属性。 -
表格跨行跨列：
跨行使用rowspan，跨列使用colspan。
注意：这些属性都是写在td内的，跨哪一个就要删掉对应的第几个单元格
跨行举例：跨第一列一二行，跨第二行三四列。
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
结果为：
| 1 | 2 | 3 | 4 |
| 6 | 7 | ||
| 6 | 6 | 7 | 8 |
-
表格嵌套：
尽量少使用表格嵌套，少使用表格的跨行跨列功能，代码维护成本太大。
嵌套举例：
<table border="1px" bordercolor="blue">
<tr>
<td>
<table bordercolor="red" border="1px">
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
结果：
| 2 | ||
| 1 | 2 |
HTML框架：
iframe内嵌框架：主要用于制造小型企业系统。其属性有src内嵌地址，width，height宽高属性，name名字属性，frameborder 边框属性（外部）若frameborder=0则无外框。
iframe内嵌框架举例：
<body>
<a href="./cssrev.html" target="iframeinfo">百度</a>
<a href="./cssrev.html" target="iframeinfo">京东</a>
<iframe align="center" name="iframeinfo" src="https://www.baidu.com" width="100%" height="700px" frameborder="0"></iframe>
</body>
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
