Web前端新手入门系列：1、HTML

1、HTML概述

1.1 HTML的基本结构

<!DOCTYPE html><!--！表示申明的意思，这一行表明下面文档标签以html5规范去解析-->
<html>
    <!--1.头部，主要用来完成一个网页的相关设置的.-->
	<head>
        <meta charset="utf-8"><!--支持汉字编码--><!--meta:元，完成对应设置-->
        <meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
        <meta name="description" content=""> <!--网站的描述内容，都写在content里-->
        <title>我的第一个网页</title><!--标题-->
        <link rel ="shortcut icon" href="favicon.ico",type="image/x-icon"><!--设置网站小图标-->
        <!--href为图标地址，type为类型png，则把x-icon改为png-->
        <style>
            //书写样式的地方
        </style>
        <link rel="stylesheet" href = "style.css"><!--用来引入外部样式文件-->
    </head>
    <!--2.主体部分-->
    <body>
    	<p>这是一个段落</p>
    </body>
    <script>
    	<!--放脚本语言，可以放在body里面--> 
    </script>
</html>

1.2 HTML的基本标签

<!--!+tab或html:5+tab会自动生成文档结构-->

<html lang="en">
<head>
    <meta charset="utf-8" >
    <title></title>
</head>
<body>
	<!--1.div:用来布局的，没有具体含义，层-->
    <div>
       Alpha
        <div>Beta</div>
    </div>
    <!--2.hx:标题，从1级到6级，1级最大，会自动加粗，有默认字号-->
    <h1>中国</h1>
    <h2>上海</h2>
    <h6>杨浦</h6>
    <!--3.p:表示段落。相当于一个回车。-->
   <p>古德里安：我是闪电战创始人，28天灭亡波兰。</p>
	<p>曼施坦因：我在哈尔科夫10万残兵击败了苏军50万精锐。</p>
	<p>朱可夫：我以列宁格勒一座城市坚守900天，最后反攻取得全面胜利。</p>
	<p>麦克阿瑟：我是西点军校第一名。</p>
   	<!--4.br，换行，p标签一般表示一段连续的文字，p内的换行通过br实现，并不成对出现-->
    <p>你觉得<br />你能<br />杀！死！我?! </p>
    <!--5.hr:生成一条水平线，主要起装饰作用。单标签，最好闭合（加上/）-->
    <hr/> <hr width="80%" align="center" color ="red" height="2px"/><!--默认为100%，黑色，1px-->
    <!--6.a:实现超文本链接-->
    <a href="http://baidu.com" title="百度" target="_blank">百度</a>
    	<!--href是跳转地址，title是鼠标放上去的提示，target有4个参数：
			1、_blank 打开一个新页面
			2、_self 把当前页面变为跳转结果
			3、_parent 使得文档载入父窗口或者包含来超链接引用的框架的框架集
			4、_top	使得文档载入包含这个超链接的窗口，将会清楚所有被包含的框架并将文档载入整个浏览器窗口
		-->
    <!--7.img:用来加载图片、图像。src:图片图像路径,alt:加载失败时显示的内容,title:鼠标移上去的提示文字-->
   	<!--<img src="" alt="" title=""/>-->
    <!--8.span:与div一样，用于布局，不过div会单独占一行，span不会，用于行内布局-->
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span><!--不会换行，中间空一格-->
    <!--9.ul/ol:前者是无序列表，后者是有序列表，列表内容都使用li标签,ul前面是黑点，ol有序号-->
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <!--注释快捷键为:Ctrl+Shift+/ -->
</body>
</html>

1.3标签

1.3.1 标签属性

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--标签属性：
		1、通常由属性名=属性值组成
		2、起附加信息的作用
		3、不是所有标签都有属性,比如br标签
	-->
    <p title="段落" class="content" id="content">这是一个测试段落</p>
</body>
</html>

1.3.2 文本格式化标签

<!DOCTYPE html>

<html lang="en"
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
 	<!--文本格式化标签：通过标签来美化文本外观-->
    <!--1.b和strong:加粗作用，且都是行级标签(不换行)但strong还有强调作用。强调主要用于SEO，便于提取关键字-->
    <b>加粗</b>
    <strong>加粗且强调</strong>
   	<!--2.i和em:使文字倾斜,em具有强调作用,行级标签，如果只是简单的倾斜效果，用i就可以，比如添加图标-->
    <i>倾斜</i>
    <em>倾斜且强调</em>
    <!--3.pre:预格式化文本,保留换行和空格及宽度，字号是小一号,块级标签，独占一行，且识别宽高=-->
    <pre>预格式化文本，保留
    	换行   和    空格</pre>
    <!--4.small和big:缩小或放大一号，行级标签-->
    <!--浏览器支持的最小字号为12px,再小需要做处理-->
    <small>小一号</small>
    <big>大一号</big>  <!--被淘汰了，但还是能用，尽量别用。使用CSS来规定文本大小-->
    <!--5.sub和sup:设置文本为下标和上标-->
    <p>X1+X2=Y</p>
    <p>下标:X<sub>1</sub>+X<sub>2</sub>=Y</p>
    <p>上标：X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup></p>
</body>
</html>

1.3.3 单双标签

单标签：由一个标记组成，一定要闭合。例如

换行符：<br/>
水平线:<hr/>
图片标签<img/>
文本标签<input/>
link标签<link/>
元信息标签<meta/>

双标签:由“开始标签”和“结束标签”两部分构成，必须成对使用。

<html>、<head>、<title>、<body>、<table>、<span>、<div>、<p>、<h1>等

1.3.4 实体转义

以&开头，;结束

符号	转义符号
小于号	& lt;
大于号	& gt;
与	& amp;
空格	& nbsp;
版权	& copy;
乘号	& times;
除号	& divide;

1.4 HTML块级元素和行内元素

1.4.1 块级元素

块级元素会独占一行，其宽度自动填满其父元素宽度，一般情况下，块级元素可以设置width,height属性，一般用来搭建网站架构、布局、承载内容…如果没有设置宽度，则默认铺满整行，其内可以包含块级和行级元素。相当于执行display:block操作

<address>、<dir>、<div>、<dl>、<dt>、<dd>、<fieldset>、<form>、<h1>、<hr>、<menu>、<noframes>、<ol>等

1.4.2 行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排列不下才会换行，其宽度随元素的内容而变化，行元素设置width和height无效。一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点"等等。宽度和高度是不可控的，其内只有行级元素。相当于执行display:inline操作

<a>、<b>、<bdo>、<small>、<br>、<cite>、<em>、<font>、<img>、<input>、<label>、<sub>等

1.4.3 相互转换

<!--1.块级标签转换为行级标签：-->
<!--inline转换为行级标签,宽高标签失效-->
<p style ="width:300px; height:50px; background:gray; display:inline">TEST</p>
<!--2.行级标签转换为块级标签-->
<span style ="width:300px; height:50px; background:blue; display:block">TEST</span>

1.5W3C规范

1.5.1 W3C

万维网联盟(World Wide Web)：一个国际性的中立组织，专门负责统一web相关的各项标准。

W3C标准由结构、表现和行为三部分组成

1.5.2 标签嵌套规则

1.块级元素可以包含内联元素（行内元素）或某些块级元素，但内联元素不能包含块元素，它只能包含其他内联元素
<div><h1></h1><p></p></div> 正确
<a href="#"><span></span></a> 正确
<span><div></div></span> 错误
2.块级元素不能放在<p>里面
<p><ol><li></li></ol></p>  错误
<p><div></div></p>  错误
3.几个特殊的块级元素只能包含行内元素，不能再包含块级元素:
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<dt>
4.块级元素与块级元素并列，行级元素与行级元素并列
<div><h2><p></p></h2></div>  正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div>  错误

1.5.3 HTML语义化标签

1、语义化，即明白每个标签的用途，再什么情况使用这个标签才合理

例如：网页上的文章标题可以用h1_{h6,各个栏目的名称也可以使用h1}h6,文章中内容的段乱就得放在段落标签p 中，再文章中由想强调的文本，就可以使用em标签表示强调等。

2、好处：更容易被搜索引擎收录，更容易让阅读器读出网页内容，能更好的体现页面的主题，兼容性更好

3、HTML语义化标签

1)< a>标签：实现超链接

**强调：**title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。很有用

2< p>标签：文章段落放到

标签中

3)< hx>标签：文章标题，栏目标题用表示

4)< strong> 和< em>标签：特别强调某几个文字

5)< q>标签：短文本引用。注意引用的文本不用加双引号，浏览器会对q标签自动添加双引号

6)< address>标签：为网页加入地址信息

7)< ul>和< ol>标签：无序列表和有序列表

8)< caption>标签：为表格添加标题和摘要，摘要的内容不会在浏览器中显示出来，作用时增加表格的可读性，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

1.6 企业规范

1、项目中文字或目录名中不能出现汉字和空格之类的其它符号，文件和目录名一般以字母或下划线开头_

页面	命名规范
首页	index.html
公司介绍	about.html
新闻列表	news.html
新闻详情页	news_details.html
产品列表	product.html
产品详情页	pre_details.html
联系我们	contact.html

2、HTML标签属性

2.1 HTML标签属性

标签由标签名、标签属性和文本内容组成 (单标签没有文本内容)

标签属性是对标签的一种描述方式：

2.1.1 通用属性：所有标签都有的属性

id：用来给标签起一个唯一的名称
class：用来给标签取一个类名，可以用来操作一批标签
style：用来设置该标签的行内样式。
title：当鼠标移到该标签上，所显示的提示内容

<html lang="en"
<head>
    <meta charset="utf-8" />
    <title>标签通用属性</title>
</head>
<body>
    <!--id:给标签取一个标识名-->
    <p id="p1">段落</p>
    <p id="p2">段落</p>
    <!--class:给一组标签取一个类名-->
    <div class="test">div</div>
    <p class="test">p</p>
    <!--style:用来设置当前标签的样式,也叫行内样式-->
    <p style="color:red;width:200px;border:1px solid #00f;">这是一次测试</p>//蓝色边框，红色文字
    <!--title:给当前标签一个提示文本-->
    <p title="111414">title标签属性测试</p>
</body>
</html>

2.1.2 自定义标签属性：通常用来传值或用于图片懒加载等封面

格式：data-*

<img data-src="path" alt="fault"  /> <!--图片懒加载，到可视区域时，才把src取出来-->
<p data-id="goodsid">...</p>

3、自有属性

2.2 table表格

table主要用于呈现格式化数据。表格是由行和列组成。

2.2.1 表格属性：

border：设置表格边框,值为边框宽度，默认单位时像素
width：设置表格宽度，默认单位是像素
align：设置表格对齐（left（默认）/center/right）
cellpadding：设置单元格间距，单元格文本与
cellspacing：设置像素间隙，单元格边框间距

<table border="1" width="400" cellspaceing="0" cellpadding="10" align="center">
    <tr>//行
    	<th>学号</th>//表头，自动加粗居中
        <th>姓名</th>
        <th>住址</th>
    </tr>
    <tr>
    	<td>007</td>//列
        <td>零零漆</td>
        <td>北京</td>
    </tr>
    <tr>
    	<td>214</td>//列
        <td>两仪式</td>
        <td>日本</td>
    </tr>
</table>

2.2.2 跨行跨列属性

跨行rowspan属性，合并行：

<tabel border="1" width=500 align=center>
	<tr>
    	<td rowspan="2" align="center" valign="middle"></td><!--valign:top,middle默认,bottome=-->
        <td></td>
        <td rowspan="3"></td>
    </tr>
	<tr>
    	<!--<td></td> 被第一行第一个合并了-->
        <td></td>
        <!--<td></td>  被第一行第三个合并了-->
    </tr>
	<tr align="center"><!--整行居中,合并后会失效-->
    	<td></td>
        <td></td>
        <!--<td></td>  被第一行第三个合并了-->
    </tr>
</tabel>

跨列colspan属性，合并列：

<tabel border="1" width=500 align=center>
	<tr>
    	<td></td>
        <td colspan="2" align ="center"></td>
        <!--<td ></td> 被(1,2)合并-->
    </tr>
	<tr>
    	<td></td>
        <td></td>
        <td></td>
    </tr>
	<tr>
    	<td colspan="3" align="right"></td>
        <!--<td></td> 被(3,1)合并-->
       <!--<td></td> 被(3,1)合并-->
    </tr>
</tabel>

2.2.3 完整表格属性

一个完整table表格一般包含**< caption>、< thread>、< tbody>、< tfoot>**元素结合，用来规定表格的各个部分(标题、表头、主体、页脚)。

< thead>标签用于组合HTML表格的表头内容
< tbody>标签用于组合HTML表格的主体内容
< tfoot>标签用于组合HTML表格的页脚内容

<table border="1" width="600" align = "center">
    <caption>学生信息表</caption>
    <thead>
        <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>家庭住址</th>
        <th>备注</th>
        </tr>
    </thead>
    <tbody>
         <tr>
         <!--按住Ctrl,鼠标点击后，松开Ctrl可进行连写-->
        <td align="center">001</td>
        <td>Tom</td>
        <td>格林伍德</td>
        <td>普通留学生</td>
        </tr>
         <tr>
        <td align="center">002</td>
        <td>Nigger*</td>
        <td>刚果</td>
        <td>非洲留学生</td>
        </tr>
         <tr>
        <td align="center">002</td>
        <td>李华*</td>
        <td>北京</td>
        <td>正黄旗</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
    	<td colspan="4" >附注:*为优秀学生</td>    
    </tr>
    </tfoot>
</table>

2.3 form表单：核心标签

form是用来实现前后端交互的一个重要标签。

2.3.1 表单属性

常用属性：

name：表单名称
action：表单数据提交的地方（通常是一个文件名(.jsp/.php.asp/.aspx/.py/)或网址）,如果是#表示提交到当前文件
method：前端提交数据到后端的方法，主要有:get和post，默认的是get,ger会将输入信息暴露在地址栏，post则不会

<form name="stuInfo" action="#" metond="get">
    <input type="submit">
</form>

2.3.2 表单元素

表单元素的有：

1）< input>：输入类，根据不同的type属性，可以变化为多种状态输入方式。

<!--1.文本框-->
<input type="text"/>:定义供文本输入的单行输入字段，默认值
	属性：placeholder(提示)/name(命名)/minlength和maxlength(最少/多输入的字符个数)/disabled(失效)/readonly(只读)/value(初始值)/pattern(正则匹配)
<!--2.密码框-->
<input type="password"/>:定义密码字段,属性与text一样，效果是输入以星号显示
<!--3.单选钮-->
定义单选按钮，通常两项以上,属性:name（必须有）/value/checked(选中)/disabled(失效)/readonly
<input type="radio" name="sex" checked/>男<!--默认选中男-->
<input type="radio" name="sex"/>女<!--同一name下的radio会排斥，所以必须有name才能正常起作用-->、、
<!--4.复选框/检查框--> 选择0项、1项或多项
<input type="checkbox" name = hobby/>打搅
<input type="checkbox" name = hobby/>睡觉
<input type="checkbox" name = hobby/>其他
<!--5.文件上传按钮-->
<input type="file"/>
<!--6.普通按钮--> 通常用它取调用脚本代码
<input type ="button" value="登录" disabled /> 定义普通按钮
常用属性：value(按钮的标题)/disabled(失效)
<!--7.图片按钮-->
	用法与button一样，特殊属性：src(用来加载提示图片，用来替换了value)
<input type="image" src=“” title="刷新"/>
	有提交功能，与sumbit功能一样
<!--8.提交按钮-->
<input type = "submit" value="" disabled/>:定义提交表单数据至表单处理程序的按钮
<!--9.重置按钮-->
<input type="reset" value="" disabled/>将表单所有组件输入的内容全部清空，还原为初始状态

2）< textarea>：

文本域（也可以叫多行文本框）,用于输入大批量的内容

常用属性：name/id/cols/rows/placeholder/minlength/maxlength/required（必须输入）/value

<textarea name="" id="" cols="30" rows="10" placeholder></textarea>

3）< select>：

下拉列表框，默认用于单项选择，用option呈现每一个选项

<form action="">
    <label for="course">选课:</label>
    <select id="course" multiple size=""><!--multiple控制多选，size控制列表的大小-->
        <option value="语文">语文</option>
        <option value="数学">数学</option>
        <option value="计算机">计算机</option>
        <option value="其他">其他</option>
    </select>
</form>

4）< button>：

普通按钮，具体提交功能，可以单独使用，不写在form元素中；如果写在form中，就有提交功能

<button id="btnOk">确认</button><!--主要用来调用js代码-->
<form action="test.aspx">
    <input type="text" name="info">
    <button>提交</button><!--这里的button的共嗯那个与input的submit按钮功能一样-->
</form>

2.4 iframe

框架集，是用来将多个网页文件组合成一个文件。

常用属性：

name：框架名
src：引入的外部html文件
scrolling：滚动条(yes/no/auto)
width：宽度（%/px）
height：高度（%/px）
frameborder：是否有边框
marginheight：框架离顶部和底端的距离(%/px)

marginwidth：框架离左右的距离(%/px)

注意：在实际开发中，尽量减少使用iframe，因为它破坏了前进和破坏的功能，且不利于搜索。

<!DOCTYPE html>

<html lang="en"
<head>
    <meta charset="utf-8" />
    <title>我的网站</title>
</head>
<body>
    <!--src内的html不需要从头开始写-->
    <!--banner-->
    <iframe src="iframe/banner.html" scrolling="no" width="100%" frameborder="0"></iframe>
    <!--导航-->
    <iframe src="iframe/banner.html" scrolling="no" width="30%" frameborder="0"></iframe>
    <!--核心内容区-->
    <iframe src="iframe/banner.html" name ="main" scrolling="no" width="70%" frameborder="0"></iframe>
    <hr wid/>
</body>
</html>

K.模板

<!DOCTYPE html>

<html lang="en"
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <hr wid/>
</body>
</html>