HTML 常用基础汇总

ome

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>title</title>
</head>
<body>
<h1>啦啦啦</h1>
<p>我是卖报的小行家</p>
</body>
</html>

Basic

标题

<hr/>创建水平线，分割内容

段落

<br/>折行

链接

<a href= "https://liheyuting.github.io/" target="_blank">This is my blog</a>

target="_blank" 在新窗口打开文档

<a name="label">锚</a> #也可以用id属性替代MAME属性

建立锚了，可以在其他地方创建指向这个锚的链接

- 同一页面

<a href="#lable">xxxx</a>

- 其他页面

<a href="https://liheyuting.github.io/html/html_links.asp#label">xxxxx</a>

(Q这个链接是怎么确定的呢)

图片

<img src="dora.jpg" alt="https://liheyuting.github.io/" width="" height="">

- 背景图片

<body background="//"

- 排列图片

<img src="" align="botton(/middle/top)"

- 浮动图片

<img src="//" align="left(/fight)"

- 增加图片链接

在<img> 前后加上

<a href="https://liheyuting.github.io/html"></a>

按钮

<botton>click</botton>

列表

<ul> #unorder list 无序列表
<li>a</li>
<li>b</li>
</ul>
<ol> #order list 有序列表

- 定义列表

<dl>
<dt>1111</dt>
<dd>2222</dd>
<dt>3333</dt>
<dd>4444</dd>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等

（Q这个不是太明白）

dl 定义定义列表

dt 定义定义项目

dd 定义定义的描述

- 嵌套列表

多加几层

属性

(Q css时多了解下）

class 规定元素的类名

id 元素的唯一id

style inline style 行内样式

title 规定元素的额外信息

文本标签

<b> 粗体

<big> 大号字

<em> 着重文字

<i> 斜体

<small> 小号字

<strong> 加重语气

<sub> 定义下标字

<sup> 定义上标字

<ins> 增加下划线

<del> 增加删除线

引用

<q> 短引用

<blockquote> 长引用

<abbr> 定义缩写

<dfn> 定义项目或缩写的定义

<address> 定义文档或文章的联系方式/作者(通常斜体显示，大多数浏览器在此元素前后折行)

<cite> 定义著作的标题（斜体显示）

表格

- 表格

<table border='1'>
<tr>
<td> row 1, cell 1</tr>
<td> row 1, cell 2</tr>
</tr>
<tr>
<td> row 2, cell 1</tr>
<td> row 2, cell 2</tr>
</tr>
</table>

#table 定义表格

#tr 若干行

#td table data 表格数据

- 边框属性

border

- 表头

<th>heading</th>

#th table heading

- 空单元格

- 跨行跨列

colspan

eg <th colspan="2"></th>

rowspan

eg <th rowspan="2"></th>

- 表格内的标签

（比如实现图片一块块）

- 单元格边距（cell padding）

- 单元格间距（cell spacing）

- 背景颜色或图片

or (background='//')

- 表格内排列内容对齐

align="left(/right)"

- frame 外框

frame=""

box 四面铁框

above 头顶有框

below 脚下有框

hsides 上头下头被框

vsides 两边有框

块、类、布局等其他

块

<div> 在CSS里设置样式属性

可用于文档布局

<span> 为部分文本设置样式属性

类

类-块-行

（Q这块有点疑问，id, name, class相关）

布局

- header 页眉

- nav 导航链接的容器

- section 定义文档中的节

- article 定义独立的自包含文章

- aside 定义内容之外的内容（比如侧栏）

- footer 定义文档或节的页脚

- details 定义额外的细节

- summary 定义details 元素的标题

（detail/article/summary Q下次注意下）

响应式web设计

（Q虽然现在还不懂，最好要有印象，以后再回头看）

RWD响应式web设计（responsive web design）

- 自己创建

在head中<style>中设置

- Bootstrap

（Q之后学）

使用现成的CSS框架

在head中加入：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="////">

内联框架

- 作为连接的目标时

加入name属性

name=""

脚本

(Q之后学)

”假设6个月之后的你在教现在的你学习“
”强迫输出促进输入“

整理过程是一个复习的过程，虽然离现在实质工作内容相差千万，还应起项目直接实操才好。

稍加整理，如有错误或者其他的建议，还请不吝赐教，万分感谢。

HTML

TML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。

HTML基础之HTML常用标签-PHP程序员雷雪松的博客

1、最基本的HTML结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML标签

a、布局标签

div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。

aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。

header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。

footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。

article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。

b、文本标签

h1-h6标签可定义标题

p标签定义段落

b/strong标签加粗

em标签来表示强调的文本，斜体

strong标签表示重要文本

u标签下划线

s标签删除线

br标签表示回车换行

hr标签表示水平线

span标签被用来组合文档中的行内元素。

blockquote标签表示块引用

pre标签可定义预格式化的文本，保持原有格式的一种标签。

sub标签下标，

sup>标签上标

 表示一个空格

©表示版权符

<表示<

>表示>

c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

d、多媒体标签

img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。

audio标签定义声音，比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>。

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

video标签定义视频，比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>。

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

e、序列化标签

ul和li无序列表标签

<ul>

</ul>

ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。

<ol>

</ol>

dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。

<dl>

<dd>用来计算的仪器 ... ...</dd>

</dl>

f、表格标签

table标签和tr标签，th标签和td标签，合并单元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表单标签

form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。

input标签用于搜集用户信息

密码，输入的字符会被掩码（显示为星号或原点）

文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data"

隐藏表单

提交

重置

radio单选

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

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多选

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />数据库

<span style="color: #ff0000;">注：checked="checked"可以简写成checked</span>

label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。

textarea标签，设置文本区内的可见行数和宽度

<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>

button标签定义一个按钮

提交按钮

重置按钮

select标签和option标签下拉列表

单选菜单列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可简写成selected，表示选中

3、其他HTML事项

a、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。

b、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。

c、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。

d、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。

e、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。

来源：PHP程序员雷雪松的博客 -HTML基础之HTML常用标签（http://www.leixuesong.cn/2045）

TML技术是网站建设必不可少的，今天小编就来分享一下HTML5的一部分基础知识。

一、 HTML5——重点文本：就是纯字符

超文本：在纯字符中嵌入样式、图片、音频、视频、超链接等内容

Hyper Text Markup Language，超文本标记语言，就是52个标记嵌入在纯文本中，实现超文本效果的语言。如：

<marquee>hello</marquee>

注意：作为一门计算机语言，HTML与Java、C、PHP不同，没有循环、选择等基本语言结构，只有纯文本和52个标签。

二、 HTML语法——重点

(1)一篇HTML文档就是一个文本文档，其中包含 “纯文本”+“标签”

(2)HTML中的标签分为两种：

双标记标签： <标签名>......</标签名>

单标记标签： <标签名/> 单标记标签中不能包含内容

(3)标签之间可以嵌套，但不能交叉

(4)标签名不区分大小写，但有个版本的HTML要求全小写，推荐全用小写

(5)标签可以声明属性，属性有属性名和属性值，属性值需要使用单引号或双引号括起来

(6)不同的标签具有不同的属性，所有的标签都具备下列四个属性：

·id：整个文档每个标签可以声明一个唯一的id号

·style：为元素指定CSS样式

·class：指定元素所属的类型

·title：指定标签的弹出式提示语

三、HTML常用标签

四、HTML文件的基本结构

(1)文档类型声明：HTML有不同的版本，如html1.0 html2.0 html3.0 html4.0(strict/transitional) xhtml(strict/transitional/frameset) html5，不同版本的HTML中可以使用标签的数量以及标签的属性是不同的，且会影响到浏览器对CSS和Java的解释执行。

(2)<html>

<head>

</head>

<body>

</body>

</html>

好了，以上就是网页搭建中HTML基础知识整理归纳，希望对刚入门的网页HTML新手有更大帮助，感谢大家的支持，后续会为大家分享更多关于网页制作经验和操作知识！

在线咨询

上一篇：宅在家太无聊？这些展览和博物馆喊你“云”端看展！附百余个“云观展”链接
下一篇：ThinkPHP之去掉文章中的所有HTML标签并截取部分内容作为简介

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 常用基础汇总

ome

Basic

属性

块、类、布局等其他

1、最基本的HTML结构

2、最常用的HTML标签

3、其他HTML事项

您的项目需求