导图社区 HTML超文本标记语言

HTML超文本标记语言

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。希望入门互联网小白能够对此有个清晰的脉络认识。

提示: 本内容由社区用户上传并分享。平台不对内容的真实性、合法性、知识产权归属及是否侵害第三方权利进行事前审核或保证。本内容可能包含受版权保护的图片、字体或其他第三方素材，使用前请自行确认授权范围。

编辑于2020-12-11 01:43:17

颜老师的作品

他的近期作品查看更多>>

HTML超文本标记语言

社区模板帮助中心，点此进入>>

颜老师的作品

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 42.4k
- 987
- 2.5k
- 401
- 0
MindMaster
安全教育的重要性
- 9.3k
- 957
- 100
- 18
- 0
issen
组织架构-单商户商城webAPP 思维导图。
- 20.6k
- 3
- 187
- 8
- 1
Kacyun
个人日常活动安排思维导图
- 10.6k
- 0
- 86
- 0
- 0
少儿栏目外景策划波波老师
域控上线
- 5.8k
- 173
- 11
- 4
- 0
jackrao
西游记主要人物性格分析
- 21.2k
- 1.5k
- 648
- 102
- 0
issen
17种头脑风暴法
- 218.2k
- 4.4k
- 12.0k
- 4.1k
- 1
MindMaster
python思维导图
- 11.8k
- 561
- 243
- 6
- 0
(*^▽^*)
亡羊补牢
- 10.7k
- 178
- 39
- 7
- 0
(*^▽^*)
外婆与姥姥的区别
- 6.8k
- 105
- 10
- 1
- 0
(*^▽^*)

HTML

常用软件

eclipse

sublime

调试浏览器chrome

html结构

<!DOCTYPE>文档

定义文档类型；不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令；位于 <html> 标签之前

如HTML5 <!DOCTYPE html>

标签

基础

注释

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

单标签,如<br><hr>;成对标签

引入脚本

属性 type；src指定外部文件的URL

如<script type="text/javascript async="" src="">alert('hello');</script>

head

<title>XHTML Tag Reference</title>

<link/>

引入样式文件

如<link rel="stylesheet" type="text/css" href=""/>

属性 rel当前文档与被链接的文档的关系 type;href;media显示在什么设备上

<base/>

定义默认链接地址

属性 href; target链接方式，在当前页面还是新的空白页

如<base href=""/>;<base target="_blank"/>

<meta/>

提供了页面的解释信息；方便SEO，搜索引擎优化

值content；http-equiv将值关联到HTTP头部；name将值关联到一个名称；scheme翻译格式

如<meta http-equiv="expires" content="31 Dec 2015"/>

如<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

定义样式，里面放的是css样式信息

属性type；media为样式表定义应用于什么媒介；

如<style type="text/css">p{color:blue}</style>

body

<p></p>

定义段落

里面可以是纯文本，也可以有其他标签

定义文档分区;范围比p标签大

里面可以是纯文本，也可以有其他标签

表示文档中的行内元素；便于对行内选定元素改变样式信息

块级元素与行内元素

块级元素如div,p，h1,占满完整一块、一行

行内元素如span,a,img,用于块级元素内，只占实际宽度

<a></a>

定义一个超链接

属性：必填href链接目标网页；选填target定义链接的打开方式,title定义链接名称，方便知道链接的用途

如<a href="" target="_blank" title="查一查">去百度查一查</a>

<img/>

嵌入一个图片

属性：必填src定义图片的URL,alt定义图片无法显示时显示的文字信息；选填width,height

无序列表

每一个列表项<li></li>

有序列表

每一个列表项<li></li>

表格

<th></th>表头

<tr></tr>表示行；

<td></td>表示tr中的列

colspan 横向合并n个单元格，colspan=""置于th、td开始标签中

rowspan 纵向合并n个单元格

表单，如登陆、注册类提交类的就是表单

属性action表示表单提交到何处；method表示表单提交的方法，post or get

<input/>单行输入框

text单行文本输入，属性type="text"，input标签其他属性name定义输入框名称,value值，placeholder提示用户的信息

radio单选框，type="radio",属性name，value,checked默认选中的值

checkbox多选框

password密码输入框

hidden隐藏字段，后台获取隐藏信息，隐藏页面信息，方便需要时取值

reset重置，复位，清除表单所有数据，属性value

如<input type="reset" value="重置"/>

submit，提交，属性value

如<input type="submit" value="提交"/>

为input标签定义标注；当点击label文本时，会触发绑定的input标签

属性 for 值是绑定的input标签定义的id名

用法1.<label for="male">男性</label> <input type="radio" name="gender" id="male" />

用法2.<label >男性<input type="radio" name="gender" /></label>

<textarea></textarea>多行文本输入框

常用属性cols,rows,autofocus自动获得焦点

<select></select>下拉选择框

选择框的每一个选项<option></option>,，属性value，selected初始值

如<form action="" method="get"> 邮箱：<input type="text" name="email"/><br/> 姓名：<input type="text" name="name"/><br/> <input type="reset" value="重置"/> <input type="submit" value="提交"/></form>

<button></button>定义按钮

常用属性type(按钮类型button,reset,submit),name,value

类型reset，submit功能与input中一样

type为button类型时不只可以用于表单，其他模块也可以用

内嵌一个文档/网页

属性src，width，height

当鼠标停在缩写上时，指示简称或缩写的含义,为浏览器、拼写简称及搜索引擎提供有用信息

属性title

<center></center>居中

将包括的文本水平居中

强调文本的一部分，有加粗效果

表示定义一个列表，可用于解释性内容

<dt></dt>表示列表标题

<dd></dd>表示列表项目描述