『前端学习笔记』 HTML5 基础内容

技术2022-07-11 80

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：HTML 教程 W3school

文章目录

关于HTML与HTML5元素，标签和属性块元素与内联元素 HTML5空文档标签简介h1~h6：标题p：段落a：锚使用a标签做页内跳转 img：图片a和img的嵌套使用 br：换行span：内嵌文字div：划分属性简介body标签的bgcolor属性：背景颜色a标签的target属性：指定打开方式align：对齐class：类名id：标识符style：样式title：额外信息文字格式化引入CSS样式外部引入：link，rel、type、href内部引入：style，type内联引入：style属性表格table列表无序列表ul有序列表ol嵌套列表自定义列表：dl、dt、dd 表单forminput：文本、密码、复选框、单选框，按钮与提交等select，option：下拉框textarea：文本域表单的action交互布局使用div布局使用table表格布局框架frameset：弃用iFrame网页内嵌链接target属性中_parent的取值与iframe 实体：转义字符

关于HTML与HTML5

HTML是一种标记语言，而不是编程语言。 HTML出现于1991年。 HTML5出现于2012年。 XHTML5出现于2013年。

元素，标签和属性

元素：元素指的是从开始标签到结束标签的所有代码。标签：承载HTML的主要内容，形如<标签>。属性：从属于标签，为可选参数，形如<标签属性 = "值">。

块元素与内联元素

块元素：通常以新行开始，如<h1>，<p>，<ul>，<div>。内联元素：通常不以新行开始，如<a>，<b>，<img>，<span>。

HTML5空文档

HTML5空文档如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>

<!DOCTYPE html> 是HTML5的声明方式。不同的HTML和XHTML版本有不同的声明方式。

<html lang="en"> html标签，定义这是一个html文档。属性lang指定语言，如"ch"，"en"等。

</html> 闭标签，大多数标签需要使用</标签名>的方式来闭合。多数IDE提供自动补全（闭合）。

<head></head> <body></body> head表示头部，body表示内容。

<head> <meta charset="UTF-8"> <title>Title</title> </head>

标签简介

h1~h6：标题

<h1>标题</h1> <h2>标题</h2> <h3>标题</h3> <h4>标题</h4> <h5>标题</h5> <h6>标题</h6> 代码结果：大小不同的6个标题。从1到6是从大到小。

p：段落

采用p标签： <p>段落一</p> <p>段落二</p> 代码结果：不采用p标签：段落一段落二代码结果：

a：锚

可以用来定义超链接。

使用a标签做页内跳转

<a name="one">内容1</a> <a href="#one">跳转到内容1</a>

用第一个标签指定name，第二个a标签href连接到#name。内容跨篇幅很大时可用性很高，直接在一个页面内点击跳转。

img：图片

src指定来源，宽高属性指定大小，alt替换文本（图片显示失误时有效）。可以用来引入图片。需要注意的是<img>标签不需要闭合。

代码结果：

a和img的嵌套使用

为图片加超链接

br：换行

都是换行操作。第二种是推荐用法。更适用于当前的操作和代码环境。

span：内嵌文字

可以通过更改样式，显示出<span>独立于其他标签的样式结果。

div：划分

<style type="text/css"> #mydiv{ color: blueviolet; } </style> <div id="mydiv"> <p>内容</p> </div>

<div>的主要作用是代码块的划分。顺带一提，css文件中，默认标签直接用，来自属性id就要加#。

属性简介

body标签的bgcolor属性：背景颜色

颜色可以自选。

a标签的target属性：指定打开方式

<a href="index.html" target="_blank"> </a> 取值有多种：

_blank，在新窗口显示目标网页 _self，在当前窗口显示目标网页 _parent，框架网页中当前整个窗口位置显示目标网页 _top，框架网页中在上部窗口中显示目标网页

align：对齐

多数标签可用，可选centor等取值，指定对齐方式。

p标签的align属性已被弃用，HTML 4.01 Strict和XHTML 1.0 Strict DTD均不支持此属性。请用CSS作为替代。 CSS语法：<p style="text-align:right">

class：类名

大多数标签拥有此属性，表示类名。

id：标识符

大多数标签拥有此属性，人工指定identification，后续添加css样式等。

style：样式

大多数标签拥有此属性，用来定义内联css样式。

title：额外信息

大多数标签拥有此属性，用来定义额外信息。

文字格式化

其中big标签被标记为弃用。

代码结果：

引入CSS样式

外部引入：link，rel、type、href

方便测试，新建一个css文件使用创建css文件，New一个File 命名为mycss.css 随便加一点颜色设置进来： h1{ color: #b3d4fc; } 外部引入过程： <link rel="stylesheet" type="text/css" href="mycss.css">

其中rel属性为"stylesheet"，type为"text/css"，href属性指定css文件位置。

测试代码：  <h1>标题h1</h1> 代码结果：

内部引入：style，type

内部引入过程： <style type="text/css"> h2{ color: aqua; } </style> 测试：  <h2>标题h2</h2> 代码结果：

内联引入：style属性

内联引入过程： <h3 style="color: blueviolet"> 标题h3 </h3> 代码结果：

表格table

表格需要用到<table>标签。 border属性定义边界长度，cellspacing属性定义单元格间隔。此外还有bgcolor可以定义填充色，background可以定义填充图片。（没有展示） <caption>定义了标题。 <tr>是行，<td>是列。<th>表头。

代码结果：

列表

无序列表ul

<li>定义列表元素

代码结果：

更改图标：

列举type的可选属性（此处无法用补全）： disc为实心原点，circle为空心圆，square为实心方块。

有序列表ol

start属性指定起始值。 type属性同样为指定列表标号的类型，可选值有： A、a、I、i。

可以使用CSS中的list-style = "none"取消端点的显示。

代码结果：

嵌套列表

<li>标签的内容同样可以是一个新的列表。

<ul type="circle"> <li>1</li> <li>2</li> <li> <ol type="I" start="18"> <li>31</li> <li>32</li> </ol> </li> </ul> 代码结果：

自定义列表：dl、dt、dd

<dl> <dt>1</dt> <dd>1d</dd> <dt>2</dt> <dd>2d</dd> </dl> 代码结果：

表单form

在以前的HTML规范当中，表单必须要在form区域内创建。

input：文本、密码、复选框、单选框，按钮与提交等

<form>  账号：<input type="text"><br/>  密码：<input type="password"><br/>  A：<input type="checkbox"><br/> B：<input type="checkbox"><br/> C：<input type="checkbox"><br/>   1：<input type="radio" name="1"><br/> 2：<input type="radio" name="1"><br/>   <input type="button" value="按钮"><br/>   <input type="submit" value="提交"><br/> </form> 代码结果：可以进行交互操作。

select，option：下拉框

<form>  <select> <option>A</option> <option>B</option> <option>C</option> </select> </form> 代码结果：

textarea：文本域

可以脱离form创建。

代码结果：可以填充内容，拖拽大小。

表单的action交互

action可以跳转到本地/网络页面，可以是各个类型的网页格式，例如html，php，jsp等等。

method方法有get和post两种取值，对应HTML的get和post两种方法。

get请求直接将参数放在url上，post请求的参数值可以在Chrome浏览器中查看。get方法可以做资源定位（根据分享url快速定位到相应web区域），post方法保护隐私。

代码结果：

代码结果（输入内容后点击提交）：可以看到网页的跳转，并且根据get请求，参数值显示在了url上。

布局

使用div布局

无格式布局： <div id="layout"> <div id="head">head</div> <div id="left">left</div> <div id="right">right</div> <div id="foot">foot</div> </div>

代码结果：

加入CSS样式（内部）：

使用table表格布局

<table width="100%" height="500px" style="background-color: #b3d4fc"> <tr>  <td colspan="2" width="100%" height="20%" style="background-color: #888888">head</td> </tr> <tr> <td width="40%" height="50%" style="background-color: coral">left</td> <td width="60%" height="50%" style="background-color: aquamarine">right</td> </tr> <tr> <td colspan="2" width="100%" height="30%" style="background-color: blue">foot</td> </tr> </table> 代码结果：

框架

frameset：弃用

标签定义框架集。它用于组织多个窗口（框架）。每个框架存在一个独立的文档。在最简单的应用中，frameset 元素仅仅声明框架集中存在的列或行的数目。由于该标签对网页可用性的负面影响，在 HTML 5 中 frameset标签没有得到支持。

iFrame

网页内嵌

index.html <body>  <iframe src="a.html" frameborder="0" width="150px" height="150px"> </iframe> </body> a.html <body bgcolor="blue">  a <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> </body> 代码结果(index.html嵌入a.html)：超出长度，自动加了下拉框。

链接target属性中_parent的取值与iframe

_parent取值在父级页面打开。

index.html <body>  <iframe src="a.html" frameborder="0" width="450px" height="450px"> </iframe> </body> a.html <body bgcolor="blue">  <iframe src="b.html" frameborder="0" width="300px" height="300px"> </iframe> </body> b.html  <body bgcolor="#7fffd4">  <a href="https://www.baidu.com" target="_parent">链接</a> </body>

代码结果（index包含a，a包含b，b包含链接）：

代码结果（点击链接）：可以看到整个a和b都变成了链接的目标网页。这便是iframe与_parent的结合。在直接父级页面打开。而_top取值是在顶级页面打开。

实体：转义字符

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

如需显示小于号，我们必须这样写：<或 < 提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

参考文档：HTML 字符实体

Processed: 0.011, SQL: 9