HTML划水

整理一下HTML的知识要点

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

#前言

HTML简介

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

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

#正文

一、基础

1.HTML文档结构

<!DOCTYPE HTML>
<html>
<body>

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

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

</body>
</html>

2.四个基础标签

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.语法（标签+元素+属性）

标签：开始标签<~>和结束标签</~>
元素：处于开始和结束标签之间的内容 <~>我是元素</~>
属性：可以理解为自定义标签的样式 <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文档引用

内部样式

<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 标签开始

<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. 有序列表

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

one
two
three

b. 无序列表

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Markdown</li>
</ul>

HTML
CSS
JavaScript
Markdown

c. 定义列表

自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。

<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样式。
直接看例子：

<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布局有三种形式

使用<div>元素布局
使用<div>元素，通过CSS对其进行样式（含定位）调整
使用HTML5的网站布局

语义元素	代表属性
header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义details元素的标题

使用表格布局
可以使用<table>表格表格化页面，用CSS样式调整表格样式

7.HTML响应式设计

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

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

8.框架

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

标签：

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

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

<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.字符实体

空格—— 

三、重点标签补充

未完待续…………

***2

#参考文档

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