HTML用心就行！初级教学-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55870194/article/details/114655532

HTML

1. 初识HTML

HTML（Hyper Text Markup Language），超文本标记语言。

超文本：文字、图片、音频、视频、动画等。

1.1 W3C标准

结构(Structure)化标准语言（HTML、XML）
表现(Presentation)标准语言（CSS）
行为(Behavior)标准（JAVASCRIPT）

1.3 元素

HTML规范是W3C制定的，开发者只要按照规范来开发HTML代码，就能在游览器中得到正确的显示。HTML语法中是基于元素的，也叫标签或者标记。

元素 = 起始标记（begin tag） + 元素内容 + 元素属性 + 结束标记(end tag)。

<h1 align="center">welcome to bailiban.</h1>

有起始跟结束标签叫对标签，还有没有元素内容，直接开始就闭合的标签叫单标签。

<br/>
<meta charset="utf-8" />

1.4 属性

属性部分写在起始标签内部，用来对标签进行补充跟描述的。一般分为局部属性跟全局属性。属性的样式效果底层都是通过CSS实现的。

局部属性：某些元素独有的属性。
全局属性【通用属性/标准属性】：所有标签都具备的属性。
- id：给元素取ID。ID值不要重复。
- title：鼠标悬停显示的文本内容。
- class：定义元素的类选择器。
- style：定义元素的行内样式。

1.5 基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
        
	</body>
</html>

<!DOCTYPE html>表示告诉游览器我们遵循什么规范，不写默认这个，表示H5规范。
html是根标签，所有内容都写在里面。
<head>标签表示网页头部信息。
<meta>标签表示描述信息，描述网页信息给游览器识别。
<title>标签表示网页标题信息。
<body>标签表示网页主题部分。

1.6 注释

<!--  HTML中的注释   -->

2. 常用标签

h

标题标签，游览器默认表现为独占一行、有段落间隙。一共分为6级标签，h1到h6。

		<h1 align="center">一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>

常用属性有align，用来控制标题在水平方向上的对齐方式，值有left/center/right，分别表示居左/居中/居右对齐。

p

<p> 标签定义段落。p 元素会自动在其前后创建一些空白。P标签也有align属性，表示水平对齐方式。

		<p>welcome to bailiban . </p>
		<p>welcome to bailiban . </p>
		<p>welcome to bailiban . </p>

hr

水平线标签。可以在网页中显示一条水平分隔线。

<hr />
<hr align="right" color="red" width="50%" size="10" />

可用属性align表示水平对齐方式，color设置颜色，width设置宽度,size表示线条粗细。

strong/b

strong标签跟b标签都是表示粗体，strong更具有语义化，推荐。

<b>seven</b>
<strong>seven</strong>

em/i

em标签跟i标签都是表示斜体，em更具有语义化，推荐。

<em>seven</em>
<i>seven</i>

u

下划线。

<u>bailiban</u>

del/s

del标签跟s标签删除标签,del更具有语义化，推荐。

<del>原价999.99</del> 
<s>原价999.99</s>

br

br标签表示换行,它是一个单标签，自闭合。

<br/>

font

字体标签，设置文本字体属性。

<font size="3" color="#FF0000" face="微软雅黑 华文行楷">大家好，欢迎大家来到百里半学习。</font>

可用属性有size表示字符大小，范围1到7；
color设置文本颜色，
face设置文本字体，可设置多个，默认从前往后，需要系统存在此字体文件才可正常显示。

span

无语义。

<span>hello.</span>

pre

预格式化文本元素，内部文本保留原样，空白不会被折叠。

空白折叠：在源代码中的连续空白字符（空格，换行，制表符），会被折叠为一个空格。

<pre>
			大家好，    欢迎大家来到百里半学习。
			     希望大家能找到一个    好的工作。
		</pre>

img

图片标签，往网页中插入图片。

<img src="资源路径" alt="当图片无法展示时候的替代文字" title="全局属性" width="宽度 px 或者 %" height=""/>

<img src="img/a.PNG" alt="美丽风景" title="美丽风景" width="400" height="200"/>

src属性设置图片的资源路径。
alt属性设置图片无法显示时的文本提示。
title属性设置当鼠标悬停时的文本提示。
width/height设置图片的宽度跟高度，单位默认像素px可省略，也可使用百分比的形式。
img标签有align属性，但并不表示水平对齐方式，如果要水平对齐方式的效果可通过p标签嵌套，居然可直接使用center标签。

center

可直接将标签内部元素设置到水平居中的位置。

<center>seven</center>

特殊符号

用于页面上特殊符号的显示。常用的特殊符号如下：

 表示空格
>表示大于符号>
>表示小于符号<
©表示版权符号
¥表示人民币符号

a

超链接，主要用于页面跳转。

<a href="目标页面位置" target="目标窗口位置" > 链接的文本或者图片 </a>

页面跳转
```
<a href="http://www.bailiban.com" target="_blank" >百里半</a>
```
- arget性值为_self表示在当前窗口显示。值为_blank表示在新窗口中显示。

功能性链接

<!-- 调用JS代码 -->
<a href="javascript:alert('点我干什么？')">click me</a>
<!-- 调用邮件客户端 -->
<a href="mailto:122564283@qq.com">发送邮件</a>
<!-- 调用拨号功能 -->
<a href="tel:13112345678">拨打电话</a>
<!-- 调用压缩文件下载 -->
<a href="a.rar">下载</a>
<!-- 打开QQ聊天窗口，链接生成地址https://shang.qq.com/v3/widget.html -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=122564283&site=qq&menu=yes">
			<img border="0" src="http://wpa.qq.com/pa?p=2:122564283:52" alt="你好，加我领取学习资料" title="你好，加我领取学习资料"/>
</a>

锚点

在网页的任意位置做记号，可以从其它位置跳转到该记号位置。
```
<span id="top">顶部</span>
		
……

<a href="#top" >回到顶部 </a>
```
还可以在其它页面直接定位到此页面的某个锚点处。
```
<a href="a.html#top" >回到顶部 </a>
```

ol/li

ol(order list)有序列表，li(list item)表示列表选项。

		<ol start="10" type="1" reversed="reversed" >
			<li>武庚纪</li>
			<li>斗罗大陆</li>
			<li>盘龙</li>
		</ol>

start表示起始序号
type表示序号类型
reversed表示是否是倒序

ul/li

ul( unordered list)无序列表，li(list item)表示列表选项。

		<ul  type="disc"  >
			<li>武庚纪</li>
			<li>斗罗大陆</li>
			<li>盘龙</li>
		</ul>

type表示列表符号类型，值一般可为disc/square/circle。

dl/dt/dd

dl(define list)用来定义列表，dt（define list title）用于生成定义列表中各列表项的标题，dd（define list define）用于生成定义列表各列表项的说明文字段，dd是对应dt的简短说明或解释。

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

<dl>
    <dd><img src="图片路径" alt="" /></dd>
    <dt>图片标题</dt>
</dl>


<dl>
    <dt>电影标题</dt>
    <dd>主要演员：刘德华，周润发</dd>
    <dd>影片长度：90分钟</dd>
    <dd>内容介绍：……..</dd>
</dl>

div

div是一个容器标签，可以用来装载其它元素。当然div也可以嵌套div。一般跟css结合一起完成布局的功能。

<div>
	<p>我们是段落标签，被div包含在其中。</p>
</div>

3. 表格

表格具有简单通用，结构稳定的特点。

<table>表示表格标签，它由行<tr>跟列<td>的单元格组成。一个简单的表格结构。

<!-- 这是一个表格  -->
<table >	
    <!-- 一个tr代表一行  -->
    <tr>
        <!-- 一个td代表一个单元格  -->
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

table标签有一些常用属性
- border表示单元格边框粗细程度
- cellpadding表示边框跟单元格内容的间距
- cellspacing表示表框跟边框之间的间距距离
- align表示表格在网页中水平的对齐方式
- width表示宽度，可以是像素，也可以是百分比
- height表示高度，单位像素
tr跟td标签上有一些常用属性
- align表示单元格内容在水平方向上的对齐方式，值有left/center/right
- valign表示单元格内容在竖直方向上的对齐方式，值有top/middle/bottom
- tr上可以设置高度height，td上可以设置宽度width
- tr跟td上的定义如果有冲突采取就近原则
td上还有些常用属性
- rowspan表示跨行
- colspan表示跨列

<table border="1" width="300px" align="center" height="300px" cellpadding="0" cellspacing="0">
			
			<tr height="50%" align="right" valign="top">
				<td width="100px">1</td>
				<td width="100px"   align="center" valign="middle" >2</td>
				<td width="100px">3</td>
			</tr>
			
			<tr>
				<td rowspan="2">4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			
			<tr>				 
				<td colspan="2">8</td>				 
			</tr>			
			
		</table>

4. 表单

HTML中的表单是用户用来在客户端提交数据到后台。表单使用<form>标签，要提交的数据都要放入此form标签中。

在这里插入图片描述

form表单
```
<form aciton="url" method="get" >
    
    
    
</form>
```
- action属性表示此要提交的后台服务器的请求地址。
- method属性表示要提交的方式，值为get/post，get会将数据拼接在地址后面，不安全，高效。post会封装到请求体中，更加安全，可以传输文件等2进制数据。
文本框
```
用户名：	<input name="user_name" type="text" value="seven" placeholder="请输入用户名" maxlength="6"  />
```
- name属性是跟文本框起名字，只有设置此属性值才会将此字段的值提交到后台。
- type表示此input标签的类型，值为text表示文本框，type属性默认值为text
- value表示文本框的初始内容
- placeholder表示提示内容
- maxlength表示文本框的内容长度

密码框

密码：<input name="user_pwd" type="password" value="seven" placeholder="请输入用户密码" maxlength="6"  />

type属性值设置为password表示此输入框为密码框，内容以*号显示。
其它属性同文本框

单选框
```
<input type="radio" value="boy" name="sex" /> 男
<input type="radio" value="girl" name="sex" checked="checked" /> 女
```
- type值为radio表示输入框类型为单选框。
- 要让多个单选框有互斥效果则必须将它们设置到一组中，即让他们有相同的name属性值
- checked是让单选框默认选中。

多选框

<input type="checkbox" value="study" name="hobby" checked="checked"/> 学习
<input type="checkbox" value="game" name="hobby" /> 游戏
<input type="checkbox" value="girl" name="hobby" /> 女孩

多选框的type属性值为checkbox。
value属性值为提交的数据值。
一组多选框的name属性值必须相同。
checked表示默认选中此多选框。

按钮
```
<input type="button" value="点击我" />
```
- 按钮组件需要将type属性值设置为button。
- value值为按钮上显示的文本。
图片按钮
```
<input type="image" src="img/a.PNG" />
```
- 图片按钮的type值为image，点击图片可以提交表单。
- src属性设置图片的url
提交按钮
```
<input type="submit" value="登录" />
```
- type属性值设置为submit表示提交按钮，具有提交表单数据的功能。
- value属性值为显示在按钮上的文本。
重置按钮
```
<input type="reset" value="重置" />
```
- type属性值为reset表示重置按钮，具有重置表单数据的功能。
- value属性值为显示在按钮上的文本。

下拉框

家乡：<select name="city">
        <option value="wuhan">武汉</option>
        <option value="suizhou" selected="selected">随州</option>
        <option value="xiangyang">襄阳</option>
        <option value="xiaogan">孝感</option>
	</select>

name表示提交数据的key。
option中的value表示选中后提交的属性值。
selected表示默认选中此下拉框

文本域

自我介绍：<textarea name="introduce" cols="50" rows="10" maxlength="20" >这个家伙很懒，什么也没有留下...</textarea>

name为数据提交的key。
cols表示列数，rows表示行数。
maxlength表示最大长度。

文件域
```
<input type="file" name="my_file" />
```
- type值为file表示为文件域。
- name为提交数据的key值。

其它

<!-- 邮箱验证 -->
邮箱：<input type="email" name="email" />
<!-- URL -->
URL: <input type="url" name="url" />
<!-- 数字,max最大值，min最小值，step步增 -->
数量: <input type="number" name="num" max="100" min="0" step="1" />
<!-- 滑块，max最大值，min最小值，step步增  -->
音量: <input type="range" name="voice" min="0" max="100" step="2" />
<!-- 搜索 -->
搜索: <input type="search" name="search" />
<!-- 颜色 -->
颜色: <input type="color" name="color" value="#00ff00" />
<!-- 出生日期 -->
出生日期: <input type="datetime-local" name="birthday" />
<!-- 星期 -->
星期: <input type="week" name="week" />

`为提交数据的key值。

其它

<!-- 邮箱验证 -->
邮箱：<input type="email" name="email" />
<!-- URL -->
URL: <input type="url" name="url" />
<!-- 数字,max最大值，min最小值，step步增 -->
数量: <input type="number" name="num" max="100" min="0" step="1" />
<!-- 滑块，max最大值，min最小值，step步增  -->
音量: <input type="range" name="voice" min="0" max="100" step="2" />
<!-- 搜索 -->
搜索: <input type="search" name="search" />
<!-- 颜色 -->
颜色: <input type="color" name="color" value="#00ff00" />
<!-- 出生日期 -->
出生日期: <input type="datetime-local" name="birthday" />
<!-- 星期 -->
星期: <input type="week" name="week" />