不正经

这个屌丝很懒，什么也没留下！

热门标签

前端入门 - 从HTML开始

作者：不正经 | 2024-05-27 04:39:27

踩

html开始

HTML从这里开始

一. 什么是HTML?
二. HTML 标签
三. HTML语法结构
四. HTML 语法执行顺序
五. HTML 基本标签
- 1. 标题标签
- 2. 段落标签
- 3. 行内标签
- 4.换行标签
- 5. 水平线分割标签
- 6. 上标，下标
- 7. 加粗标签
- 8. 标记标签
- 9. 引用标签
- 10.块级标签
- 11. 有序列表
- 12. 无序列表
- 13. 定义列表
- 14. 文本显示方向
- 15. 常用特殊符号
- 16. 注释
六. a 超链接标签
- 1. 超链接
- 2. 锚点设置
七. img 图片标签
八. 媒体标签
- 1. audio 音频标签
- 2. video 视频标签
- 3. embed 嵌入标签
九. marquee 飘动标签
十. table 表格标签
十一. form 表单标签
十二. input 输入标签
- 1. text 文本框
- 2. password 密码框
- 3. file 文件上传
- 4. radio 单选框
- 5. checkbox 多选框
- 6. image 图片
- 7. submit 提交按钮
- 8. reset 重置按钮
- 9.普通按钮
十三. textarea 文本域
十四. select 选择列表
- 1.选择列表
- 2.选项组
十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换
- 1. 行内标签
- 2. 块级标签
- 3. 行内块标签
- 4. 行标签与块标签相互转换
十六. HTML三种常见页面布局方式
- 1. Frameset 布局
- 2. Table 布局
- 3. DIV 布局

一. 什么是HTML?

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

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二. HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

三. HTML语法结构

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

</body>
</html>
1
2
3
4
5
6
7
8
9
10

四. HTML 语法执行顺序

从上至下

五. HTML 基本标签

1. 标题标签

<h>系列

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
1
2
3
4
5
6

页面展示：
在这里插入图片描述

2. 段落标签

<p></p>

<p>这是段落标签</p>
<p>这是段落标签</p>
1
2

页面展示：
在这里插入图片描述

3. 行内标签

<span></span>

<span>这是一行！</span>
<span>这是一行！</span>
1
2

页面展示：
在这里插入图片描述

4.换行标签

<br/>

<span>这是一行！</span>
<br/>
<span>这是一行！</span>
1
2
3

页面展示：
在这里插入图片描述

5. 水平线分割标签

<hr/>

<hr/>
1

页面展示：
在这里插入图片描述

6. 上标，下标

上标：<sup></sup>
下标：<sub></sub>

M<sup>2</sup>
<br/>
H<sub>2</sub>O
1
2
3

页面展示：
在这里插入图片描述

7. 加粗标签

<strong></strong>

<p>未加粗</p>
<strong>加粗</strong>
1
2

页面展示：
在这里插入图片描述

8. 标记标签

<em></em>

<em>标记标签</em>
1

页面展示：
在这里插入图片描述

9. 引用标签

<q></q>

<q>引用标签</q>
1

页面展示：
在这里插入图片描述

10.块级标签

<div></div>

<div>块级标签</div>
<div>块级标签</div>
1
2

页面展示：
在这里插入图片描述

11. 有序列表

<ol>
    <li>标签</li>
    <li>标签</li>
</ol>
1
2
3
4

页面展示：
在这里插入图片描述

12. 无序列表

ul无序列表变迁默认类型为type="disc",黑色实心圆点
type="circle"，黑色空心圆点
type="square"，黑丝实心方块

<ul>
    <li>标签</li>
    <li>标签</li>
</ul>
1
2
3
4

页面展示：
在这里插入图片描述

13. 定义列表

<dl>
    <dt>一级</dt>
    <dd>二级</dd>
    <dd>二级</dd>
    <dt>一级</dt>
    <dd>二级</dd>
    <dd>二级</dd>
</dl>
1
2
3
4
5
6
7
8

页面展示：
在这里插入图片描述

14. 文本显示方向

<bdo></bdo>

<bdo dir="ltr">从左开始</bdo>
<br/>
<bdo dir="rtl">从右开始</bdo>
1
2
3

页面展示：
在这里插入图片描述

15. 常用特殊符号

 空格
>大于号（>)
<小于号（<）
"引号（"）
©版权号（©）

16. 注释

<!--内容-->
1

不会在页面进行显示

六. a 超链接标签

1. 超链接

<a href="" target="">跳转</a>
1

href：链接指向的页面的 URL。
target：打开链接的方式。默认为_sel。
_self：在本页面打开链接。
_blank：在新的页面打开链接。
download：下载超链接目标。

2. 锚点设置

回到页面顶部

 <a href="#top">顶部</a>
1

回到页面指定位置

 <p id="aaa">跳到这里</p>
 <a href="#aaa">指定位置</a>
1
2

七. img 图片标签

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

src：必需的属性。它的值是图片的URL地址，也就是图片路径地址。
alt：图像的替代文本。如果图片因为某些原因无法显示，浏览器将显示代替文本。
title：鼠标放上去显示的文字。
width：设置图片的宽度。
height：设置图片的高度。
align：图片的对其方式。
top：以顶部对其。
right：以右面对其。
buttom：以底部对其。
left：以左边对其。
middle：中间显示。

八. 媒体标签

1. audio 音频标签

<audio src=""></audio>
1

src：必需的属性。它的值是音频的URL地址，也就是音频路径地址。
autoplay：自动播放
autoplay=“autoplay”
controls：控制台
controls=“controls”
hidden：隐藏控制台
hidden=“hidden”
loop：每当音频结束时重新开始播放
loop=“loop”

2. video 视频标签

<video src=""></video>
1

src：必需的属性。它的值是视频的URL地址，也就是视频路径地址。
autoplay：自动播放
autoplay=“autoplay”
controls：控制台
controls=“controls”
hidden：隐藏控制台
hidden=“hidden”
loop：每当音频结束时重新开始播放
loop=“loop”
height：视频播放器的高度
width：视频播放器的宽度

3. embed 嵌入标签

  <embed src="" type=""></embed>
1

src：嵌入内容的 URL
type：嵌入内容的类型
height：嵌入内容的高度
width：嵌入内容的宽度

九. marquee 飘动标签

用来插入一段滚动的文字。目前此标签已经过时，不推荐使用。

<marquee>飘动内容</marquee>
1

loop：飘动的次数
scrollamount：飘动的速度
direction：飘动方向
left：从右向左
right：从左向右
direction：飘动方向
behavior：滚动方式
scroll：循环滚动，默认。
slide：滚动一次
alternate：两端来回滚动

十. table 表格标签

<table>
    <caption>表头</caption>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr>
        <td>二行一列</td>
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

caption：表头
th：文本自动居中、加粗
tr：控制表格的行
td：控制行中的单元格（列）
border：表格的边框线
bgcolor：背景颜色
width：表格的宽度
height：表格的高度
cellpadding：单元格的内容与单元格之间的距离
cellspacing：单元格与单元格之间的距离
rowspan：设置单元格所占的行数（设置 td）
colspan：设置单元格所占的列数（设置 td）
align：设置文本的对齐方式（设置 td）
left：左对齐
center：居中对齐
right右对齐

十一. form 表单标签

<form action="http://www.baidu.com">
    <input type="submit" value="提交">
</form>
1
2
3

action：表单提交的URL地址
method：表单的提交方式
get：默认的提交方式。提交的数据会显示在地址栏上。
post：提交的数据不会显示在地址栏上，传送的数据一般不受限制。
name：表单的名称

十二. input 输入标签

<input type="">
1

type： input 元素的类型
value：input 元素的初始值
placeholder：帮助用户填写输入字段的提示
maxlength：输入字段中的字符的最大长度
size：输入字段的宽度
name：input 元素的名称

1. text 文本框

<input type="text">
1

2. password 密码框

<input type="password">
1

以小黑点形式显示输入的内容，比较安全。

3. file 文件上传

<input type="file">
1

multiple：多选
multiple=“multiple”

4. radio 单选框

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
1
2

name名称相同情况下，只能单选

5. checkbox 多选框

<input type="checkbox" name="fruits">西瓜
<input type="checkbox" name="fruits">香蕉
<input type="checkbox" name="fruits">葡萄
1
2
3

checked：默认选择的
checked=“checked”
disabled：不可选的，禁止选择
disabled=“disabled”

6. image 图片

<input type="image" src="" alt="错误" />
1

src：图片的URL地址
alt：图片无法显示情况，提示的文字

7. submit 提交按钮

<input type="submit" value="提交">
1

提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

8. reset 重置按钮

<input type="reset" />
1

重置按钮会清除表单中的所有数据。

9.普通按钮

<input type="button"  onclick="to()" />
1

定义可点击的按钮，但没有任何行为。可以结合onclick事件使用。

十三. textarea 文本域

<textarea rows="3" cols="20">
	这是一个文本域。。
</textarea>
1
2
3

rows：文本区内的可见行数
cols：文本区内的可见宽度
maxlength：文本区域的最大字符数
placeholder：文本区域预期值的文字提示
readonly：文本区为只读

十四. select 选择列表

1.选择列表

select>
    <option>葡萄</option>
    <option>香蕉</option>
    <option>西瓜</option>
</select>
1
2
3
4
5

size：下拉列表中可见选项的数目
name：下拉列表的名称
disabled：禁止该下拉列表项（设置option）
selected：选项（在首次显示在列表中时）表现为选中状态

2.选项组

<select>
    <optgroup label="一组"></optgroup>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <optgroup label="二组"></optgroup>
    <option>D</option>
    <option>E</option>
    <option>F</option>
</select>
1
2
3
4
5
6
7
8
9
10

label：定义当使用时所使用的标注，选项组的名称。

十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换

1. 行内标签

可以多个标签存在一行，不能直接设置行内标签的宽、高，完全靠内容撑开宽和高。
常用的行内标签：
<span>、 <a>、 <big>、 <em>、 <i>、 <lable>、 <input>、 <select>、 <small> 、<strong>、 <sub> 、<sup>、 <u>、 <textarea>、 <img>

2. 块级标签

独占一行，可以设置宽、高。
如果不给宽度，块级标签的宽度将默认为浏览器的宽度，即100%。
常用的块级标签
<div>、 h系列、 <li>、 <p>、 <form>、 <ul>、 <ol>、 <table>、 <hr>、 <address>、 <dl>、 <dt>、 <dd>

3. 行内块标签

结合行内和块级标签的优点，不仅可以对宽、高属性生效，还可以多个标签存在一行显示。

常用的行内块标签：
<img>

4. 行标签与块标签相互转换

行标签转块标签：

display:block;
1

块标签转行标签：

 display:inline;
1

转换为行内块标签：

 display:inline-block;
1

十六. HTML三种常见页面布局方式

1. Frameset 布局

一些常见的后台管理系统大部分是用 Frameset 来布局的，所以固定了结构类的布局用 Frameset 来实现比较好。

2. Table 布局

是一种旧的布局方式，在现在的项目中还是很常见，Table 实际上它更适合做数据的展示，而非布局。但在 DIV + CSS 布局还没有流行起来之前，大量的网站是 Table 来布局。包括现在依然有人在使用。
缺点：

Table 布局的话，只有把 Table 内的所有内容加载完成了，才会加载样式，所以加载速度要慢一些。
Table 布局属于表格形式，不利于SEO优化。
Table 对于页面布局来说，从语法上看是不正确的。

3. DIV 布局

现在最流行的一种布局方式，它相比比 Table 更灵活，定位比 Table 更好用，简单，修改起来也方便。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/629907