HTML初学总结

HEAPSTONE
133 阅读4分钟

HTML总结

1. HTML5常识

Web前端也叫HTML5开发工程师(Web Front-End Development FE)

1.1 Web(网页)的组成

网页和网站：一个网站上有N多个网页 网页里面可以有：文本，图片，音频，视频，链接，程序...组成

1.2 HTML基本学习内容

HTML CSS3 JavaScript(核心) 等

HTML给网页提供结构

CSS给网页提供样式(颜色、大小等)

JS给网页提供交互

1.3 HTML基础知识

HTML: HyperText Markup Languge 超文本标记语言

1.3.1 基本骨架

文档声明，告诉浏览器以什么样的标准来解析我们的代码

html元素：html为网页的根元素，只有这一个

lang属性：指定网页的语言，zh-CN表示中文

head元素：head为网页的头部，基本上对网页的设置都会在head实现

meta属性：charset="UTF-8"如果不指定，会出现乱码

body元素：网页的主要内容

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

</body>
</html>

1.3.2 标签、属性、元素

标签:标签都是使用< >包起来，分单标签和双标签，分男标签,女标签和人妖标签

标签与标签之间是有关系，分兄弟关系和父子关系

属性:写在开始标签中，以xxx= "xxx'这种形式出现，一个标签中可以有N个属性

属性也分两类:公有属性，特有属性

公有属性: class, id, title, style

元素:标签+属性+标签之间的内容

2. 常见标签

2.1 标题标签

h1-h6:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
    <h5>这是h5标签</h5>
    <h6>这是h6标签</h6>
</body>
</html>

h1-h6.png

2.2段落标签

<p>一个段落</p>

2.3 换行标签

<p>换行标签可以使文本换到下一行中去<br>换行之后的文本来到下面</p>

换行.png

2.4 文本格式化标签

  • 加粗
<strong>使文本加粗显示</strong><br>
<b>使文本加粗显示</b>

Snipaste_2022-06-09_17-13-19.png

  • 倾斜
<em>使文本倾斜显示</em><br>
<i>使文本倾斜显示</i>

Snipaste_2022-06-09_17-15-39.png

  • 删除线
<del>给文本加删除线</del><br>
<s>给文本加删除线</s>

Snipaste_2022-06-09_17-16-43.png

  • 下划线
<ins>给文本添加下划线</ins><br>
<u>给文本添加下划线</u>

Snipaste_2022-06-09_17-17-34.png

2.5 图片标签

src 用来添加图片路径，alt 是在图片无法加载时的替换内容

<img src="" alt="">

2.6 路径和链接

  • 路径

(1)相对路径 在同一个文件夹直接找名字 向上一级../ 向下/

(2)绝对路径 链接标签 href里写链接地址，可以是外部链接或内部链接 外部链接(协议+域名+网址) 内部链接(文件名)

a标签：href里是链接地址

<a href=""></a>

2.7 表单类标签

input元素中的type属性:

text：文本输入框（明文输入） 场景：在网页中显示输入单行文本的表单控件, 可以使用>placeholder，提示用户输入内容。

password：文本输入框（密文输入） 场景：在网页中显示输入密码的表单控件, 可以使用placeholder，提示用户输入内容。

radio：单选框 场景：在网页中显示多选一的单选表单控件，可以使用name实现多选一，可以使用checked表示默认选中。

checkbox：复选框 场景：在网页中显示多选多的多选表单控件，可以使用checked表示默认选中。

button：普通按钮 场景：在网页中显示不同功能的按钮表单控件。

reset：重置按钮 场景：点击之后，恢复表单默认值。

submit：提交表单数据给服务器 场景：提交按钮，点击后之后提交数据给后端服务器。

file：文件上传 场景：在网页中显示文件选择的表单控件，可以使用multiple表示多文件选>择。

注意点：type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框

<form action="">
    <input type="text">
</form>

Snipaste_2022-06-09_17-20-31.png

2.8表格类标签

table表格 tr行 th表头 td每行的单元格

<table border="1">
    <caption>标题</caption>

    <tr>
        <th>表头</th>
        <th>表头</th>
    </tr>

    <tr>
        <td>第1列</td>
        <td>第2列</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

Snipaste_2022-06-09_17-22-13.png

2.9 列表类标签

  1. 无序列表
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

Snipaste_2022-06-09_17-24-12.png

  1. 有序列表
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

Snipaste_2022-06-09_17-24-48.png

  1. 自定义列表
<dl>
    <dt>自定义列表</dt>
    <dd>自定义列表</dd>
</dl>

Snipaste_2022-06-09_17-25-35.png

avatar
文章
阅读
粉丝