HTML基础

初识HTML

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。

浅析HTML、CSS、JS之间的联系

​ HTML：是提供用户访问的网页；

​ CSS：美化HTML页面；

​ JS：是一种js脚本语言，提供用户点击动作（特效）的处理，动态控制页面内容。

HTML标签

基础标签：

1.h1 h2 h3 h4 h5 h6标签（定义一个标题）

<h1></h1>
<h2></h2>
<h3></h3>
...
<h6></h6>

2.P标签（定义一个段落）

<p></p>

3.br标签（ 产生一个换行符，是一个单标签）

<br/>

4.hr标签（ 产生一条水平线）

<hr/>

标签的特性：

​ 1.标签绝大多数是闭合标签，但也有半闭合标签

例如 <br/>	<hr/>

​ 2.标签可以无线嵌套的
​ 3.标签内部是可以添加属性的

问题：

哪些标签是双标签，哪些是单标签？

双标签

<标签名> 内容 </标签名>
<p></p>
<ul></ul>
<a></a>

单标签

<标签名 />
<hr/>
<br/>

双标签：根据标签的含义，需要指定一个范围的标签，通常都是双标签
​ 比如，哪些文字是标题，需要指定范围，所以用h1标签制作标题，h1标签是一个双标签。

单标签：通常应用在一个元素和符号，不需要指定范围，直接使用
​ 比如，换行符、水平线、图片、输入框

特殊符号

​ 由于浏览器在解析渲染HTML代码时，有些符号是特殊符号，无法直接显示，我们需要用到这些符号，必须使用特殊符号处理办法。
​ 语法：

<		&lt;
>		&gt;
空格		&nbsp;
平方		&sup2;
上标		<sup></sup>
下标		<sub></sub>
正负号		&plusmn;

锚点

锚点跳转ID

文本标签

1.b标签和strong标签

​ 将包含的文本加粗

2.i标签和 em标签

​ 将包含的文本修饰成斜体！

3.del标签

​ 定义删除文本

布局标签

1、span标签：
​ 定义一个没有任何效果的文本！
​ 用于配合CSS对文本进行修饰,没有默认效果，没有负担。

<span></span>

2、div标签：
​ 定义一个块
​ 用于对网页进行布局

<div></div>

span与div相同点：

​ 对文字或元素不产生任何默认效果

span与div不同点：

​ span是行内标签（内联标签）
​ div是块标签
​
行内标签和块标签是标签的两种类型：

​ 行内标签：【依附】于内容上，不会独占一行
​ 块标签：独占一行

A标签

<a href="">连接的文字</a>

href属性：点击连接时跳转的目标URL
注意：如果要跳转到外部的网站，必须如 https:// http:// 协议
target属性：点击连接时，在哪个目标打开网页
self 默认属性（在自身网页下打开）
_blank 在新窗口中打开连接

target="self"
target="_blank"

路径

相对路径

在不同网页中加连接时，连接的URL不一样！！！
从当前文件出发，以当前文件为出发点来找资源！
./ 当前目录（可以省略不写）
…/ 上一级目录
目录名/下一级指定目录

绝对路径

在不同的网页中连接，都用同一个连接。
协议式：
​ http://
​ https://

img标签

语法：<img src="图片路径" alt="说明文字" title="鼠标悬浮显示文字"/>

src属性：【必写】指定图片的路径
alt属性：设置图片的说明（搜索引擎对图片进行阅读，当图片无法展示时可以显示出说明）
width属性：设置图片的宽度(只设置宽度或高度时，会等比例缩放)
height属性：设置图片的高度

列表标签

无序列表 ul

    <ul></ul>定义一个无序列表
    <li></li>定义一个列表项
    	<ul>
    		<li>列表项1</li>
    		<li>列表项2</li>
    		<li>列表项n</li>
    	</ul>

特性：
1)ul标签是块标签(独占一行),是一个双标签
2)ul标签有默认的内边距和外边距

注意：
1)ul和li必须要搭配使用
2)ul标签内只能出现 li标签
3)li标签中可以出现所有的其它标签

有序列表 ol

<ol></ol>	和无序列表一模一样	
	<ol>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项n</li>
	</ol>

注意：
1)所有特性和ul一模一样
2)唯一不同点在于：引导符是数字
3.自定义列表 dl（配合 dt dd 标签一起使用）

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    .....
</dl>

特征：
1)dd有默认的左边外边框
2)dl有默认的上下外边距

表格

表格标签

table标签：定义一个表格区域

<table>
	<tr>
		<td>单元格1</td>
		<td>单元格2</td>
		<td>单元格3</td>
		<td>单元格n</td>
	</tr>
</table>

​ border属性： 设置表格的边框

​ width： 设置表格的宽度

​ cellpadding属性： 设置表格中单元格内容与边框之间的间距

​ cellspacing属性： 设置单元格边框之间的间距

​ align： 水平布局，属性值包括：center、left、right

​ tr标签： 定义表格的行

​ td标签： 定义表格的单元格

​ caption标签： 定义表格的标题

合并单元格

colspan属性：跨列
rowspan属性：跨行

表单

FORM标签

（定义表单区域，负责传输数据）

​ action属性：设置表单提交的目标网址URL

​ method属性
​ get 方法：【默认值】将数据附加在网址的后面进行传输
​ 语法：
​ URL网址？参数名=参数值&参数名2=参数值
​ 注意：
​ 1)所有出现文件名(URL)的地方都可以打开？进行get方式传值
​ 2)只能用来传输少量的数据
​ 3)在网址后面可以直接看到，不安全

​ post方法：不会附加在网址后面(隐形的传值)

​ 注意：
​ 1)post方式可以传大量数据(上传文件)
​ 2)隐形传输，非常安全
​ 3)form表单通常使用post方式，只有一个例外：搜索框

input标签

为用户提供输入内容的控件，根据不同的type属性会表现出不同的外观或控件。

语法：
     <input type="控件类型" name="" value="" />

type属性：【掌握】

​ text 【重点】文本框

​ passworde 【重点】密码框

​ submit 【重点】提交按钮，会把表单中的信息提交到指定位置

​ reset 重置按钮：让整个表单中的所有元素回到初始状态

​ button 普通按钮：不产生任何作用

​ file 【重点】文件上传框

​ image 图片类型按钮

​ radio 【重点】单选框

​ 1)要制作一组单选框，name值必须是同一个值
​ 2)必须为每一个单选框设置value值，传数据时直接传value值

​ checkbox 【重点】复选框，用法与单选框一样

name属性：设置输入框的参数值，参数值是用户输入的值

value属性：设置input的默认值

checked属性：为单选框或复选框设置默认选中项

maxlength属性：最大允许输入的字数

其它表单标签

select标签：定义一个下拉框，必须要和option一起使用，为select提供下拉选项

默认下拉选项
selected="selected"
<select>
	<option></option>
	<option selected="selected"></option>
	<option></option>
</select>

textarea标签：定义一个多行文本域

​ cols属性：设置文本域的宽度，单位是：字

​ rows属性：设置文本域的高度