HTML

HTML简介

　　HTML是超文本标记语言，不是编程语言，是一种描述性的标记语言。HTML文件是标准的ASCII文件。

　　超文本是指用超链接的方法，将各种信息组织在一起的网状文本，组织方式通过链接，跳转至要查看的文档。

　　HTML文档即网页，浏览器的作用是读取HTML文档。

　　通常HTML页面由<html>标签定义，包含两个部分<head>和<body>。

HTML页面组成

　　<!DOCTYPE html> 声明为 HTML5 文档

　　head通常用于页面的一些基本语言的描述，如网页的标题和关键字。

　　body标签元素定义了网页的主题内容区域。

块级元素与内联元素

　　块级元素：在浏览器显示，通常以新行开始/结束（<h1>……<h6>、<p>、<ul>、<table> 、<div>and so on）。

　　内联元素：在浏览器显示，通常不以新行开始（<b>、<td>、<a>、<img>、<span> and so on）。

属性

　　每个HTML标签可以具有一个或多个属性，可以对标签进行进一步的设置或定义，W3C规范，属性总是在HTML元素的开始标签中规定。

　　格式：属性名=“属性值”

　　注意事项：1）大小写不敏感，建议小写。

　　　　　　　2）属性值建议使用双引号。

<head>的标签：

　　（1）title标签元素：主要作用是定义网页的标题（书签的默认名，浏览器保存该网页后成为网页的文件名，搜索的关键字）。

　　（2）base标签元素：定义网页的基准路径，使当前页面中的相对URL变为完整绝对的URL；该元素在一个html页面中只能出现一次。（<base href="utl"/>）

　　（3）link标签元素：用于创建连接到CSS样式表，用于描述当前HTML页面要引用的外部样式文件。（<link rel="stylesheet" type="text/css" href="CSS文件"/>，其中stylesheet表示文档的外部样式表）

　　（4）meta标签元素：位于head区域的辅助性标签。

常用标签：

1.文本及格式化

标签	描述
<h1>……<h6>	标题标签
<hr>	创建水平线
<br>	换行
<!-- 这是一个注释 -->	注释
<p>	定义一个文本段落，每个段落描述从新的一行开始
<b>	粗体文本
<em>	着重文字
<i>	斜体字
<small>	小号字
<strong>	加重语气
<sub>	下标字
<sup>	上标字
<pre>	预格式文本
<del>	删除线
<ins>	下划线

补充说明：通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用（<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示）。

2.超链接

　　超链接（超文本链接），单击链接即可自动跳转到超链接的目标对象，实现网页资源间的便捷快速访问。

　　标签：<a>显示在浏览器的文本</a>

属性	说明	取值
href	连接的目标地址（可跳转）	url/某网页的锚点（取锚点需要加#）
target	定义超链接打开时所在的窗口	_blank：新页面打开链接 _self：当前页面打开 _top：网页框架最顶层架构打开链接 _parent：当前窗口的父框架打开
id	创建网页的内部锚点，类似于标签，不能同href同时存在（不可跳转）	id名/锚点名

3.列表

　　展现同级别或有子类别的多个内容项。

　　1）无序列表：内容项前使用粗体圆点；列表标签：<ul>；内容项标签：<li>。

　　2）有序列表：一般采用数字序号标记；列表标签：<ol>（其中的属性type取值：“1”、“A”、“a”、“i”、“I”）；内容项标签：<li>。

　　3）自定义列表：可以定义每个项目的标题及其描述的组合，用<dl>标签定义，其中的标题用<dt>定义，内容项用<dd>定义（说白了就是内容项前面没有标记）。

4.表格

标签	描述
<table>	定义表格，最外层的标签
<caption>	定义表格标题，默认居中
<th>	定义表格中的表头单元格，默认加粗和居中
<tr>	表格中的行
<td>	表格中的单元，每写一个<td>相当于在该表中加了一个单元框
<thead>	表格中的表头内容
<tbody>	表格中的主体内容
<tfoot>	表格中的表注内容（脚注）
<col>	表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组

表格标签的主要属性：

属性	描述	（取值）说明
border	表格的边框	数值型，0表示没有边框
cellpadding	单元格的边距，单元格与其内容之间的间隔	数值型，单位是像素， 0表示没有边距
cellspacing	单元格的间距，单元格与单元格之间的间距	数值型，单位是像素， 0表示没有边距
bgcolor	表格的背景颜色	颜色值
width	宽度	长度数值
height	高度	长度数值
colspan	横向合并	一个单元格跨多列，一般是tr的属性
rowspan	纵向合并	一个单元格跨阔行，一般是td的属性

5.表单

表单标签元素：<form>，用于定义一个表单区域。语法格式如下：

　　　　表单输入列表

　　　　……

　　　　表单输入列表

　　</form>

表单输入项标签	描述
<form>	定义供用户输入的表单（目前理解是一种套娃行为）
<input>	定义输入项
<textarea>	定义文本域
<label>	定义了<input>元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了<fieldset>元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮（html5新引入的，类似于<input>下面的button）

<form>标签的主要属性	说明	取值
action	发送表单数据	url
name	定义表单名称	文本
target	定义在何处打开action URL	类似于超链接的

标签input的type属性值：

　　text：输入单行文本

　　password：输入密码

　　radio：单选输入项，区别不同单选框根据其name属性值，相同则是处于同一个单选框。

　　checkbox：复选框，name属性值规则和radio一样。

　　file：用于定义一个文件上传组件。

　　button：定义一个按钮。

　　submit：提交按钮，点击则自动提交表单。

　　reset：重置按钮。

下拉选项框：

　　　　[<optgroup label="组名1">]

　　　　　　……

　　　　[</optgroup>]

　　　[<optgroup label="组名2">]

　　　　……

　　　　[</optgroup>]

　　</select>

参数说明&补充：

名称：定义下拉框组件的名称，服务器端通过该名称可获得用户选择的选项值。
选项的值：定义该选项的值，将会在表单提交时发送到服务器端。
选型的文本：在页面上显示的内容。

多行文本域：

　　标签：<textarea>初始文本内容</textarea>；

　　属性（目前已知）：cols，rows，name……

面板容器：

　　定义一个放置相关表单元素的区域，<legend>标签用来指定该区域的标题。定义如下：

　　　　　　表单元素项

　　　　</fieldset>

6.框架

　　框架集标签：<frameset>，其中包含的区域标签：<frame>

　　　　……

　　</frameset>

<frameset>属性

说明

rows

例：20%，100，*。

分三行，分别占20%，

100像素，剩余部分

cols

取值同上

<frame>标签属性	说明	取值
frameborder	是否显示框架周围的边框	0（无）\1（有）
marginheight	定义框架上下方边距	像素值
marginwidth	定义框架左右侧边距	像素值
name	框架名称，允许作为表单提交、超链接的target	文本
noresize	定义框架不支持大小调整	noresize
scrolling	框架中是否显示滚动条	yes\no\auto

注：1）rows和cols属性不能同时使用，如果需要将页面划分为多个区域，可以使用框架的嵌套。

　　2）<frameset>标签不能同时和<body>存在，html5不再支持<frameset>标签。

7.多媒体

　　1.视频

　　　　　　　　　　　　……

　　　　　　　　　　</video>

　　2.音频

　　　　</audio>

其他属性：

　　文本属性--align（对齐）：实测文本可以用center、left、right。（例：text-align:right）

　　表单中有一个placeholder：信息提示。

　　margin-left（<p style="margin-left: 20px">）

posted @ 2022-03-19 15:18 hred～阅读(120) 评论(0) 收藏举报

刷新页面返回顶部

hred～