整理一下HTML的知识要点

background: 博客新建好了,需要的前端知识也就更多了,所以抽时间重新补一the front-end knowledge。本篇是HTML的部分内容,仅记录部分常见常用稍微重点的标签或知识。下面直接开始吧,敲就完了!!!(奥利给)


#前言

HTML简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

简单的说就一对标签加个属性就完了


#正文

一、基础

1.HTML文档结构
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
<body>

<h1>第一个一级标题</h1>

<p>第一个段落</p>

</body>
</html>
2.四个基础标签
1
2
3
4
5
6
7
8
9
1.标题(<h1>~<h6>
eg:<h6>六级</h6>
2.段落(<p>
eg:<p>段落内容</p>
3.链接(<a>
eg:<a href="https://mrgo123.github.io" alt="我的博客地址">MrGo123</a>
4.图像(<img src="url" width="宽" height="高" />
eg:<img src="url" width="100" height="100" />
tips:<img />是个"自闭"标签😅😅
3.语法(标签+元素+属性)
1
2
3
4
标签:开始标签<~>和结束标签</~>
元素:处于开始和结束标签之间的内容 <~>我是元素</~>
属性:可以理解为自定义标签的样式 <a href="" alt=""></a>—— href和alt就是属性
重点强调:class、id、style

二、其他重点标签介绍

1.CSS样式—<style>属性
  • 外部样式()
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML与CSS文档分离样式,可多个HTML文档引用

  • 内部样式
1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

对单个HTML文件内统一定义样式

  • 内联样式
1
<p style="font-family:verdana;color:red">This is a paragraph</p><!--结果是字体是verdana,字体颜色是红色-->

This is a paragraph

对单个标签定义样式

2.表格
  • 每个表格由 table 标签开始
  • 每个表头由 th 标签开始
  • 每个表格行由 tr 标签开始
  • 每个表格数据由 td 标签开始
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<p>一列:</p>
<table border="0">
<tr>
<td>100</td>
</tr>
</table>

<p>一行三列:</p>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<p>两行三列:</p>
<table border="10">
<tr>
<th>Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

一列:

100

一行三列:

100 200 300

两行三列:

Heading1 Heading2 Heading3
100 200 300
400 500 600

border是表格属性,用于定义边框粗细程度

3.列表

a. 有序列表

1
2
3
4
5
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
  1. one
  2. two
  3. three

b. 无序列表

1
2
3
4
5
6
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Markdown</li>
</ul>
  • HTML
  • CSS
  • JavaScript
  • Markdown

c. 定义列表

  • 自定义列表以 <dl> 标签开始。
  • 每个自定义列表项以 <dt> 开始。
  • 每个自定义列表项的定义以 <dd> 开始。
1
2
3
4
5
6
<dl>
<dt>项目1</dt>
<dd>……项目里的内容……</dd>
<dt>项目2</dt>
<dd>……项目里的内容……</dd>
</dl
项目1
……项目里的内容……
项目2
……项目里的内容……
4.块
  • 块级元素 <div>
    eg: <h1>, <p>, <ul>, <table>,<div>,……

    <div> :是可用于组合其他HTML元素的容器

    1
    2
    3
    <div style="color:#00FF00">
    <p>This is a paragraph.</p>
    </div>

This is a paragraph.

  • 内联元素 <span>

    eg: <b>, <td>, <a >, <img >,……
    <span> : 可做文本容器

    1
    This is a <span style="font-family:verdana;color:red"> span </span> tag.

    This is a span tag.

5.类Class

类:可以简单理解为对HTML进行分类,使我们能够为元素的类定义不同的CSS样式。
直接看例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.cities {
background-color:lightBlue;
color:white;
margin:00px;
padding:10px;
}
</style>

<div class="cities">
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

首先提取结构主要有:<div> 、<style>。再看<div>中的class(这就是div元素的类,其类名为 cities),再看<style>内有 “.cities{……}“ ,“……”号里的就是类为cities的<div>的自定义属性。

<style>即为上述 CSS样式 ,其内部{……}属性详请学习CSS

6.布局

HTML布局有三种形式

  1. 使用<div>元素布局
    使用<div>元素,通过CSS对其进行样式(含定位)调整

  2. 使用HTML5的网站布局

语义元素 代表属性
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义details元素的标题
  1. 使用表格布局
    可以使用<table>表格表格化页面,用CSS样式调整表格样式
7.HTML响应式设计

响应式设计:即能够改变网页尺寸(对不同设备有不同的网页显示效果)

创建:1.自己创建;2.使用现成的CSS框架 eg:Bootstrap

8.框架

作用:实现在同一个窗口显示多个页面

标签:

  • 框架结构标签<frameset>
  • 框架标签<frame>

设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中,而 HTML 文档 “frame_b.htm” 被置于第二个列中:

1
2
3
4
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

还有个内联框架<iframe>:在页面中自定义嵌入网页

9.HTML脚本

HTML脚本:<script>标签

详学见JavaScript

10.文件路径
路径 描述
<img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中

绝对路径和相对路径,优先相对路径(表上均为相对路径)

11.字符实体

空格——&nbsp;

三、重点标签补充

未完待续…………

***2

#参考文档

  1. w3school
  2. 菜鸟教程

Tips:本页摘要内容基于以上两个网站的HTML教程,部分案例题材亦取于以上网站,如有侵权,还请联系我删除,thanks!!!

评论




博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本站使用 Volantis 作为主题,总访问量为

桂ICP备2021001128号