Html标签

Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签

目录

开发工具

  • chrome
  • subline
  • vscode
  • photoshop

浏览器内核

IE内核 Trident
Firefox Gecko
Safari苹果浏览器 Webkit
Chrome Chromium/blink
Operapresto presto

html骨架

  • HTML标签：所有html标签中的根节点
  • Head标签：文档头部，描述文档的各种属性和信息。包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。如<！DOCTYPE>声明了htm版本为html5版本
  • Title标签：文档的标题
  • Body标签：文档的主体，素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

html标签分类

html标签分类分为双标签和单标签，双标签具有嵌套关系、并列关系，如<div></div>；单标签有：<input/>、<img/>

html标签

特殊标签

  • <link> ：定义文档与外部资源的关系，最常见的用途是链接样式表

    <head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

    属性

    • charset——html5不支持
    • href url ——规定被链接文档的位置
    • hreflang language_code——规定被链接文档中文本的语言
    • medi media_query——规定被链接文档将被显示在什么设备上
    • rel alternate\author\help\icon\licence\next\pingback\ prefetch\prev\search\sidebar\stylesheet\tag——规定当前文档与被链接文档之间的关系
    • type MIME_type——规定被链接文档的 MIME 类型

  • <meta>：定义了与文档相关联的名称/值对。提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部

    <meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
//这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

    属性

    • *content some_text——定义与 http-equiv 或 name 属性相关的元信息
    • http-equiv content-type\expires\refresh\set-cookie ——把 content 属性关联到 HTTP 头部。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档
    • name author\description\keywords\generator \revised\others——把 content 属性关联到一个名称。比如"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
    • scheme some_text——定义用于翻译 content 属性值的格式

排版标签

名称 语义 例子
标题标签 head <h1></h1>，<h2></h2>..<h6></h6>
段落标签 paragraph <p></p>
水平线标签 horizon <hr/>
换行标签 break <br/>
div标签 <div> </div>
span标签 <span></span>

文本格式化标签

名称 语义 例子
粗体 strong <b></b> <strong></strong>
斜体 <i></i> <em></em>
加删除线 delete <s></s> <delb</del>
下划线 underline <u></u> <ins></ins>

图像标签img

属性 属性值 描述
src url 图像路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比） 图像宽度
height 像素（XHTML不支持%页面百分比） 图像高度
border 数字 图像边框宽度

链接标签a

属性 属性值 描述
href Url 用于指定链接目标的url地址，Hypertext Reference的缩写。意思是超文本引用
target self_blank 用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式。

herf

1. 外部链接 需要添加 `http://`
2. 内部链接 直接链接内部页面名称即可 比如 `< a href="index.html"/>`
3. 空连接 `href="#"`
4. 锚点定位 
	——本页面跳转
		1. 给想要跳转的标签添加id名
		2. 点击可跳转id名标签所在位置<a href="#id名></a>
	——跳转到其他页面的锚点
		1. <a id="test">锚</a>
		2. <a href="test2.html#test"></a>

特殊字符标签

列表标签

类别 描述
无序列表 各个列表项之间没有顺序级别之分，是并列的
有序标签 有排列顺序的列表，其各个列表项按照一定的顺序排列定义
自定义列表 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。 
//无序
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

//有序
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

//自定义
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

 注意：
 1. <ul>中只能嵌套<li>直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性

表格标签

类别 描述 语法
表头标签 表头一般位于表格的第一行或第一列，其文本加粗居中。 用表头标签替代相应的单元格标签 <tr> </tr> <th><th/>
表头标题 caption 元素定义表格标题。 <caption></caption>
表格结构 表格可划分为头部、主体和页脚 <thead></thead>用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。 <tbody></tbody>用于定义表格的主体。 位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。 <thead><thead/> <tbody><tbody> 
<table>
  <tr>
    <td>单元格内的文字</td>
  </tr>
</table>


<tr>
	<th>表头<th/>
</tr>


<table>
   <caption>表格标题</caption>
</table>


<table>
	<thead><thead/>
	<tbody><tbody>
<table/>
属性名 属性值 含义
border 设置表格的边框（默认border=“0”无边框） 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值（默认为2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值（默认为1像素）
width 设置表格的宽度 像素值
aline 设置表格在网页中的水平对齐方式 left、center、right
rowspan 数字 跨行合并单元格
colspan 数字 跨列合并但管个

表单标签

类别 属性 属性值 描述
input type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
image 图像形式的提交按钮
file 文件
name 由用户自定义 控件的名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数
label - - label 标签为 input 元素定义标注（标签）。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
textarea
select 下拉菜单，至少包含一对<option></option>; 在option中定义selected="selected“时，当前项即为默认选中项
form action url地址
method Get/post
name 用于指定表单的名称，以区分同一个页面中的多个表单。 
//label
<form>
  <label for="male"</label>
  <input id="male" />
</form>

//文本域
<textarea cols="每行字符数" rows="行数"></textarea>

//下拉菜单
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

路径

类别 描述
相对路径 以网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
绝对路径 绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
  • 图像文件和HTML文件位于同一文件夹：<img src="logo.gif"/>
  • 图像文件位于HTML文件的下一级文件夹：<img src="img/img01/logo.gif" />
  • 图像文件位于HTML文件的上一级文件夹：<img src="../logo.gif" />
  • D:\web\img\logo.gif
  • http://www.itcast.cn/images/logo.gif
posted @ 2020-08-18 11:05  sanhuamao  阅读(147)  评论(0)  编辑  收藏  举报