HTML学习笔记 - 技术栈

整理了一份HTML入门的核心笔记，都是写页面最常用的基础内容，方便随时查阅。

基础页面结构

最基础的HTML页面骨架：

html

<!DOCTYPE html>

<html >

<head>

</head>

<body>

这里是测试body测试内容。。。

</body>

</html>

常用基础标签

都写在body标签内：

<h1> ~ <h6> ：标题双标签，自带加粗换行，数字越大字号越小
<p> ：段落双标签，自带段落间隔
<hr> ：单标签，横向分隔线
：注释，页面不显示

元素通用属性

给标签添加额外属性，语法： <标签属性1=参数1 属性2=参数2>

align ：对齐方式，可选 left / right / center
bgcolor ：背景色，可直接给body设置页面背景

html

文本格式化标签

用来调整文字样式：

<b> ：加粗
<br> ：换行
<i> ：字体倾斜
<del> ：删除线
<strong> ：强调，效果类似加粗
<u> ：下划线
<small> ：小号字体
<sub> ：下标
<sup> ：上标
<ruby> ：标注拼音，部分浏览器兼容性一般
<mark> ：黄色背景高亮

用法示例：

html

H<sub>2</sub>0

超链接 a标签

常用5种链接形式：

链接外部网站
链接本地文件
图片链接
电子邮件链接
下载文件链接

示例：

html

<a href="http://www.baidu.com">baidu</a>

<br><a href="mailto:123@13.com">contract me</a>

补充 target 属性：

_self ：当前窗口打开，默认值
_blank ：新窗口打开

图片 img标签

单标签，核心属性：

src ：图片路径
alt ：图片加载失败时显示的提示文字
width / height ：宽高，支持像素和百分比；宽度百分比相对页面宽度，高度百分比无效

示例：

html

列表

分无序列表和有序列表，列表项都是 <li> 标签，里面可放文字、图片、链接。

无序列表 ul

默认前面是实心圆点， type 属性可改样式： disc 实心圆、 circle 空心圆、 square 方块

html

<ul>

</ul>

有序列表 ol

默认数字排序， type 改排序样式， start 设置起始数字

html

<ol>

</ol>

表格 table标签

基础结构： <table> 包裹表格， <tr> 代表行， <td> 代表单元格。

常用属性：

border ：边框粗细
<th> ：表头单元格，自带居中加粗
colspan ：横向合并单元格
rowspan ：纵向合并单元格

示例：

html

<table>

</table>

HTML实体

用来输出一些不能直接在网页中显示的特殊字符。

表单 form

用于向服务器传递数据，核心属性：

action ：指定数据提交的地址
method ：提交方式
get ：数据会附加到url后面传递给服务器，是默认方式
post ：将数据打包发给服务器，由服务器读取

input 元素

表单最常用的输入控件，核心属性：

type ：控件类型，可选值：
text ：单行文本框
password ：密码框
submit ：提交按钮
reset ：重置按钮
button ：普通按钮
image ：图片式按钮
hidden ：隐藏字段
email ：邮箱格式输入（新特性，浏览器支持有差异）
name ：字段名称，提交参数时的标识
value ：输入框默认值
maxlength ：最大输入长度
placeholder ：输入提示文字
required ：必填项，不填写无法提交