HTML_day1
day1：
一、超文本（TyperText markup language）语言的定义：
1、超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。
2、一种按信息之间关系非线性地存储、组织、管理和浏览信息的计算机技术。超文本技术将自然语言文本和计算机交互式地转移或动态显示线性文本的能力结合在一起，它的本质和基本特征就是在文档内部和文档之间建立关系，正是这种关系给了文本以非线性的组织。 概括的说，超文本就是收集，存储和浏览离散信息以及建立和表现信息之间关联的一门网络技术。
3、超文本是由若干信息结点和表示信息节点之间相关性的链构成的一个具有一定逻辑结构和语义关系的非线性网络
二、html简介：
1、 html：超文本标记语言（网页语言），英文全称——TyperText Markup Language
2、 操作方式：使用一系列标签进行页面操作。
3、标签格式：<标签名字>
** 标签通常成对出现：（<html> </html>） 。<html> 被称为开始标签， </html> 被称为结束标签。
**特例：它们在起始标签内就结束。<br/>:换行， <hr/> :横线
**固定标签：<head> 页面信息 </head> ； <body> 页面内容 </body> 。
4、html不区分大小写。
5、操作思想：使用标签对数据进行封装，通过改变属性值达到数据需要的显示效果。
三、常用标签：
1、文字标签：修改文字样式。
——标签格式：<font> <font>
——属性：
** 大小：size（1-7），当超过7，值会被默认为7.
**颜色：color
--两种表示方法：1、用英文字母表示。2、用十六进制数表示（#******：RGB），可以使用工具直接查找！
2、注释标签：对内容进行注释。注释只存在于源码中，不显示在页面上
——标签格式：<!-- 注释内容-->
3、水平线标签：此标签在开始标签内结束。
——标签格式：<hr/>
——标签属性：
**大小：size(1-7)，当超过7时，值默认为7.
**颜色：color
-两种表示方法：1、用英文字母表示。2、用十六进制数表示（#*******：RGB），可以用工具直接查找。
4、标题标签：
——标签格式：<h1> </h1> …………<h6> </h6>。标签字体依次减小
——标签特殊性：使用时自动换行。
5、特殊标签：
——< ：此标签表示 <
—— > ：此标签表示 >
—— ：此标签表示一个空格
——& ：此标签表示&
6、列表标签：实现文字排版的列表效果
——标签格式：
<dl> <dt>主列表</dt> <dd>子列表1</dd> <dd>子列表2</dd> <dd>子列表3</dd> </dl>
——标签内容：
**<dl> </dl> ：控制列表范围。
**<dt> </dt> ：上层内容。
**<dd> </dd>：下层内容。
——有序列表：使列表内容通过有序符号排序
**标签格式：
<ol> <li>列表</li> <li>列表</li> <li>列表</li> </ol>
**标签属性：type，用于设置排序方式，常用排序符号有1（默认）、a、i。
**标签内容：<li> 标签内容</li>
——无序列表：使列表内容通过无序符号排序
**标签格式：
<ul> <li>列表</li> <li>列表</li> <li>列表</li> </ul>
**标签属性：空心圆circle ， 实心圆disc （默认值）， 实心方块square。
**标签内容：<li> 标签内容 </li>
7、图像标签：
——标签格式：<img/>
**图片导入：<img, src = "图片路径"/>
<html>
<head>
<title>HTML的图片标签演示！</title>
</head>
<body>
<!--图片标签演示-->
<img , src = "12.jpg"/> //此处src提供相对路径
</body>
</html>
——属性：
**src：图片路径
**路径导入：
**绝对路径：从盘开始的路径。
**相对路径：
1、与html文件在同一路径：直接使用文件名。
2、在html的下层目录：找到与html同层的文件（ffile），然后使用路径格式：file/文件名
3、在html的上层目录：使用路径：../文件名
../ ：表示上一层
**width：设置图片宽度。
**height：设置图片宽度。
**alt：在图片上显示文字（图片不直接显示，当把鼠标移动到图片上，停留片刻后文字显示），当图片显示失败时，文字依然显示。但此属性的兼容性比差，在有的浏览器上，此功能不显示。
8、超链接标签：用于链接其它的html资源，常用于资源定位。
●链接资源：
——标签格式：<a href = "资源地址"> 显示在页面内容（对资源的注释）</a>
<html>
<head>
<title>这是怪兽不纯粹的测试！</title>
</head>
<body>
<a href = "hello.html"target = "_blank"> 即将进行超链接测试</a>
</body>
</html>
——标签属性：
**href：链接的资源的地址（html的相对路径，操作方法相同于src的获取方式）
**target：设置超链接页面的打开方式，默认是在当前页面打开。
*** _blank：新的页面打开。
*** _self ：在当前页面打开（默认打开方式）
——标签特殊性：当标签的href为空时，会打开当前的html所在文件夹，所以应设置为 href = "#"，表示此超链接无效。
<html> <head> <title>这是怪兽不纯粹的测试！</title> </head> <body> <a href = "hello.html"target = "_blank"> 即将进行超链接测试</a><br/> //正常超链接 <a href = ""> 此超链接将会打开当前html所在文件夹</a><br/> //空地址超链接，点击将会打开当前html所在的文件夹 <a href = "#"> 新的标签页将会被打开！</a> //无效地址的超链接，点击无效 </body> </html>
●定位资源：
——标签格式：<a name = "定位资源地址"> 内容</a> <a href = "#定位资源地址"> </a>
——标签属性：
**name：需要定位的资源。
<html> <head> <title>这是怪兽不纯粹的测试！</title> </head> <body> <br/> <a name = "head">顶部</a> //被定位的资源地址 <pre> //原样输出标签 网络爬虫获取网页源码: 后续对本地生成的文件进行数据分析，即可获取你想要的信息。!!! </pre> <a href = "#head">回到顶部</a> //返回时的标签格式。 </body> </html>
9、原样输出标签：将内容原样输出在页面上。
——标签格式：<pre> 输出内容 </pre>
10、表格标签（需要高度重视）：
——标签格式： <table> <tr> <td></td> </tr></table> ，表格生成顺序为->先生成横格，再生成纵格
<html> <head> <title>怪兽不纯粹的表格测试</title> </head> <body> <table border = "1" bordercolor = "blue" cellspacing = "0" width = "300" height = "200"> //<table> 表格内容 </table> :控制表格范围 <caption>身份信息</caption> //<caption> 表格标题 </caption> :用于设置表格标题 <tr> //<tr> </tr> :一对此标签表示一个横格（horizontal :水平线） <td align = "left">姓名</td> //<td> </td> :已对此标签表示一个纵格（longitudinal：纵） <td align = "center">年龄</td> <td align = "right">身高</td> <td rowspan = "3">怪兽不纯粹</td> </tr> <tr> <td>小黑</td> <td>20</td> <td>160</td> </tr> <tr> <th>小白</th> <th>20</th> <th>161</th> //<th> </th> :此标签也可以生成纵格，但格子内的内容会默认为居中加粗 </tr> <tr> <td colspan = "4">你好</td> </tr> </table> </body> </html>
表格效果：
——标签属性：
***table标签属性：
****border：表格线的大小，值为数字。
****bordercolor：表格线的大小。值与文字标签字体颜色属性设置相同
****cellspacing：表格线的间隙，值为数字。
****width：表格的总宽度。
****height：表格的总高度。
***纵格<td></td>属性：
****align：设置纵格内的内容对齐方式。属性值为：left（左对齐），center（居中），right（右对齐）。
****rowspan：纵格的跨行合并。
****colspan：纵格的跨列合并。
11、表单标签： 类似于对java图形界面的操作封装，表单标签的功能是为服务器获得数据。此标签属于复合标签。
——范围标签的格式内容：
***<form> </form>:控制表单的范围
****属性：1、action：表单内容提交的地址，默认为当前页面。
2、method：表单内容的提交方式。
——两种常用的提交方式：get和post，提交方式默认为get。
get与post的区别：1、get请求地址栏会携带提交的数据，post不会携带。（post会将提交的数据放入请求体里面，此部分内容属于http协议）
2、get请求安全级别较低，post级别较高。
3、get请求存在数据大小的限制，post不会。(get请求的地址栏存在长度限制)
——enctype ：只有做文件上传时需要设置这个属性，一一般请求下不设置这个属性（此部分内容在文件操作部分）。
***输入项：可以输入内容或者可以选择内容的部分。
————大部分的输入项：使用<input type = “输入项的类型”/>
*****在输入项里面需要有一个name属性
*****不同输入项：<input type = "text"/>
*****密码输入项：<input type = "password"/>
*****单选输入项：<input type = "radio"/>
—在里面需要有一个name属性。
—name属性值必须相同。如果name属性值不同，则可以进行多选。
—每一标签必须有一个value值,用于区分每一个键值。目的是在数据传输的时候进行内容识别。功能类似为同一个key值，在不同的传输时间对应不同的value值。
—实现默认选中的值：checked = "checked"
****复选输入项：<input type = "checkbox">
—在里面需要有一个name属性
—name属性必须相同
—必须有一个value值，用于区分每一个键值
—实现默认选中的值：checked = "checked"
****文件输入项：<input type = "file"/>
—在文件输入中用到。
****下拉输入项：没有在input输入标签里面
—标签格式：<select name = "选择提示">
<option value = "识别值"> 识别内容</option>
………………
</select>
—默认选择：selected = "selected"
****文本域输入选项：<textarea cols = "高" rows = "宽"></textarea>
—标签属性：cols（设置文本域高），rows(文本域宽)
—此文本域是向右旋转了90度后再放置在了页面上，所以实际设置的高与宽是相反的设置关系
****隐藏项：<input type = "hidden"/>
—不会显示在页面上，但是会存在于html里面。
****提交按钮：<input type = "submit"/>
—value属性：按钮默认内容为“提交查询内容”，但可以通过name属性进行设置。
—也可以使用图片包装提交按钮：<input type = "image" src = "图片路径">
—使用提交按钮后，内容提交形式为 ？（内容起始符）输入项name的值1 = 输入的内容值1 &输入项name的值2 = 输入的内容2&（&为内容分隔符）…… ，此种形式相似key—value的形式进行传输。
****重置按钮：<input type = "reset"/>
—将页面重置为最开始进入未输的的状态（不是清零）。
—value属性：按钮默认内容为“重置”，可以通过value属性值自定义设置
****普通按钮：<input type = "button" value = "按钮内容">
—和js一起使用。
—value属性：没有默认内容，可以通过value设置按钮显示
html语言演示：
<html> <head> <title>怪兽不纯粹的表单测试</title> </head> <body> <form action = "hello.html" method = "get"> 手机号码:<input type = "text" name = "na"/><br/> 创建密码:<input type = "password" name = "pas"/><br/> 性别:<input type = "radio" name = "sex" value = "man" checked = "男"> 男 <input type = "radio" name = "sex" value = "women"> 女<br/> 请选择年份:<select name = "请选择"> <option value = "1998"> 1998</option> <option value = "1999"> 1999</option> <option value = "2000" selected = "2000"> 2000</option> </select><br/> 爱好:<input type = "checkbox" name = "love" value = "love1"/> 乒乓球 <input type = "checkbox" name = "love" value = "love2"/> 羽毛球 <input type = "checkbox" name = "love" value = "love3"/> 篮球 <br/> 性格表述: <textarea rows = "5" cols = "10"></textarea><br/> 载入头像图片:<input type = "file"/><br/> <input type = "image" src = "T%IC7TK_J92K9Y``][J@MI2.png"/><br/> //图片提交按钮 <input type = "submit" value = "立即注册"/><br/> //正常提交按钮 <input type = "reset" value = "重置信息"/><br/> <input type = "button" value = "普通按钮"/> </form> </body> </html>
效果演示：
12、文字加粗标签b：使字体加粗，字母原型bold(加粗)，当此标签出现后，以后出现的字体内容都将默认加粗。
——标签格式：<b> 内容</b>
13、文字的删除线标签：在文字中间加入删除线，字母原型strikethrough（删除线）
——标签格式：<s>内容</s>
14、文字的下划线标签：在文字下加入下划线。字母原型underline(下划线)
——标签格式：<u>内容</u>
15、文字的斜体标签：将文字变成斜体。字母原型italics(斜体)
——标签格式：<i> 内容</i>
16、上标的显示标签：用于显示上标。字母原型superscript(上标)
——标签格式：<sup>内容</sup>
17、下标的显示标签：用于显示下标。字母原型subscript(下标)
——标签格式：<sub>内容</sub>
19、段落标签：使数据呈现段落形式，并自动换行，且比<br>多换一行。字母原型pragraphy
——标签格式：<p>段落内容</p>
20、div标签：一种内容排版标签，具有自动换行功能。
——标签格式：<div>内容</div>
21、span标签：一种内容排版标签，不具有自动换行功能。
——标签格式：<span> 内容 </span>
html代码演示：
<html> <head> <title>怪兽不纯粹的其它标签测试</title> <body> <b>床前明月光<b><br/> <u>疑是地上霜</u><br/> <i>举头望明月</i><br/> <s>低头思故乡</s><br/> 100<sup>2</sup><br/> A<sub>0</sub><br/> <div>春眠不觉晓</div> <div>处处闻啼鸟<div> <span>夜来风雨声</span> <span>花落知多少</span> </body> </head> </html>
显示效果：
22、框架标签：进行多个页面的排版，使用此标签时，不能使用<body>标签
标签格式：
<html> <head> <title>怪兽不纯粹的frame标签测试</title> </head> <frameset rows = "30,*" > <frame name = "top" src = "top.html"/> <frameset cols = "50,*"> <frame name = "dwon_left" src = "down_left.html"/> <frame name = "down_right" > </frameset> </frameset> </html>
标签介绍：<frameset>：控制主页面分割
<frame> ：控制子页面分割。
23、html的头标签的：位于head里面的标签。
***** <title> ：表示在标签上显示的内容。
——标签格式：<title> 显示的内容</title>
**** <meta>：设置页面上的一些相关内容。
——标签格式：<meta name = "keywords" content = "1 , 2, 3"/>：用于早期的页面搜索
<meta http-equiv = "refresh" content = "3; url = xxxx.html" >：实现网页的定时跳转
**** <base>：进行超链接的基本设置
——标签格式：<base target = "打开方式"> ：统一设置超链接的打开方式。
**** <link>：用于引入外部文件。
浙公网安备 33010602011771号