前端基础-Html

HTML5

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

W3C标准

基本结构

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8">定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

可视化结构

html的lang属性：声明网页所使用的语言供浏览器抓取

body的页面结构

语法

注释 <!--注释内容-->，快捷键ctrl+/

标签

标题 > H标签

//<h1> </h1>~`

`依次从大到小

不建议在页面中写多个h1标签，h1标签可以被搜索引擎获取到，如果有多个，可能会进入搜索引擎的黑名单。

1
2
3
4
5
6
<h1>HELLO</h1>
<h2>HELLO</h2>
<h3>HELLO</h3>
<h4>HELLO</h4>
<h5>HELLO</h5>
<h6>HELLO</h6>

段落 > P标签

<p>标签定义段落。P元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中
规定。

1
<p>段落内容</p>
属性 值 描述
align lef、right、center、justify 规定段落中文本的对齐方式，以后可以用样式取代它

水平线 > hr标签

  • width宽度 1.百分比 2.px
  • align对齐方式 left right center(默认)
  • size 水平线粗细
1
2
<hr width="50%" align="left" size="5"/>
<hr width="5px" align="right" size="10"/>

换行 > br标签

​ br标签为换行符号，<br>标签是空标签（意味着它没有结束标签

​ 注意：<br>标签只是简单地开始新的一行，而当浏览器遇到
通常会在相邻的段落之间插入一些标签时，垂直的间距。请使用<br>来输入空行，而不是分割段落

1
<br/>  or <br>

字体样式标签

粗体 > strong

1
<strong>内容</strong>

斜体 > em

1
<em>内容</em>

链接 > a标签

​ <a>标签定义超链接，用于从一张页面链接到另一张页面。

​ <a>元素最重要的属性是href属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。

​ 若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target属性）

target属性

  • _self 当前窗口
  • _blank 新开空白窗口
  • _parent 子窗口
  • _top 顶级窗口
属性 值 描述
href url 规定div元素中的内容的对齐方式，以后可以用样式取代它
target self 当前窗口
blank 新开空白窗口
parent 子窗口
top 顶级窗口
Framename作为锚点的a标签的name值		 规定在何处打开链接文档。
blank：开启新页面显示页面；
Self:当前页面显示跳转到页面，默认值。
_top：用于有frameset布局的页面，想要覆盖整个页面显示。
Framename：这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。		 
1
2
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target=_blank>百度</a>

锚点的实现
利用a标签的name属性：

1
<a name="top"></a>

一般标签的id属性：div id=”” a id=””等,

1
<div id="top"></div> <a id=”top></a>

铺点定位

1
<a href="#top">返回首部</a>

格式化标签

font

​ 规定文本的字体(face)、字体尺寸(size)、字体颜色(color)

pre

定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

文本标签

<b>（粗文本）、<strong>(粗文本)、<i>（斜体文本）、<u>（下划线文本）、<del>（中划线文本）、<sup>（上标文本）、<sub>（下标文本）

图片标签

图片链接

​ img元素向网页中嵌入一幅图像。

​ 注意：从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

1
<img src="" alt="">

必须属性

属性 值 描述
alt text 规定图像的替代文本，一般在图片无法正常显示占位的文字
src url 规定显示图像的URL。

元素类型

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素

块级元素

元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置，元素宽度在不设置的情况是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素

和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素

和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

div和span

div

<div>是一个块级元素，通常与css配合使用，用于布局。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式。

1
<div>content</div>

常用属性

属性 值 描述
align left、right、center 规定div元素中的内容的对齐方式，以后可以用样式取代它

span

span默认占内容长度位数

<span>标签被用来组合文档中的行内元素，span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

1
<span>content</span>

特殊字符

空格 &nbsp;

大于&gt

小于&lt

版权符 &copy;

在HTML中，某些字符是预留的

在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体（characterentities）。

实体名称对大小写敏感！

列表

有序列表

由<ol> </ol>和<li> </li>标签组成。

无序列表

由<u1> </u1>和<1i> </1i>标签组成。

1
2
3
4
5
6
7
8
9
<ul>
    <li></]i>
    <]i></1i>
</ul>

<ul>
    <1i>好好学习</1i>
    <1i>天天向上</i>
</ul>

常用属性

type属性值 描述规定列表的项目符号类型。可以使用样式取代。
disc disc实心圆（默认)
circle circle：空心圆
square Square
Sqare Sqare：方块

自定义列表

<dl> </dl>自定义列表

<dt> </dt> 自定义列表标题

<dd> </dd> 小列表

1
2
3
4
5
6
7
<dl>
    <dt>en</dt>
    <dd>a</dd>
    <dd>b</dd>
    <dd>c</dd>
    <dd>d</dd>
</dl>

表格

<table></table>标签定义HTML表格。

<tr></tr>标签定义表格的行。tr元素包含一个或多个th或td元素

<td></td>标签定义HTML表格中的标准单元格

<th></th>定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。

简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。
理解：table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。

媒体元素

视频、音频

1
2
3
<!--媒体元素标签 	路径  控制开关	自动播放-->
<video src="路径" controls autopaly> </video>
<audio src="路径" controls autopaly> </audio>

iframe内联框架

1
2
3
4
5
6
<!--内联框架自定义地址-->
<iframe src="https://www.bilibili.com" frameborder="3px" width="1200px" height="900px"> </iframe>

<!--使用a标签target属性打开内联框架-->
<iframe src="" name="mainName" frameborder="3px" width="1200px" height="900px"> </iframe>
<a href="https://www.bilibili.com" target="mainName"></a>

表单

form

​ <form>标签用于为用户输入创建HTML表单。
​ 表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。
​ 表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。

补充

input

<input>标签用于搜集用户信息。

​ 根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等
等。

hidden隐藏

required为必填属性

​ date 日期框

​ disable 禁用按钮

textarea 文本区

控件。文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定该标签定义多行的文本输入，textarea的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

1
<textarea>content</textarea>

label 标签

​ <label>标签为input元素定义标注（标记）。

​ label元素不会呈现任何的特殊效果。

​ label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

1
2
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>

button 按钮

1
<button>按钮</button

select下拉框

<select>属性

用于定义下拉列表

option属性

表单验证方式

placeholder 提示（用于输入框）

required 非空判断

pattern 正则表达式

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！