导图社区 HTML超文本标记语言
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。希望入门互联网小白能够对此有个清晰的脉络认识。
编辑于2020-12-11 01:43:17HTML
常用软件
eclipse
sublime
调试浏览器chrome
html结构
<html> <head></head> <body></body> </html>
<!DOCTYPE>文档
定义文档类型;不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令;位于 <html> 标签之前
如HTML5 <!DOCTYPE html>
标签
基础
注释<!-- -->
<head></head>
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题
<body></body>
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
单标签,如<br><hr>;成对标签
<script></script>
引入脚本
属性 type;src指定外部文件的URL
如<script type="text/javascript async="" src="">alert('hello');</script>
head
<title></title>
<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"/>
<style></style>
定义样式,里面放的是css样式信息
属性type;media为样式表定义应用于什么媒介;
如<style type="text/css">p{color:blue}</style>
body
<p></p>
定义段落
里面可以是纯文本,也可以有其他标签
<div></div>
定义文档分区;范围比p标签大
里面可以是纯文本,也可以有其他标签
<span></span>
表示文档中的行内元素;便于对行内选定元素改变样式信息
块级元素与行内元素
块级元素如div,p,h1,占满完整一块、一行
行内元素如span,a,img,用于块级元素内,只占实际宽度
<a></a>
定义一个超链接
属性:必填href链接目标网页;选填target定义链接的打开方式,title定义链接名称,方便知道链接的用途
如<a href="" target="_blank" title="查一查">去百度查一查</a>
<img/>
嵌入一个图片
属性:必填src定义图片的URL,alt定义图片无法显示时显示的文字信息;选填width,height
<ul></ul>
无序列表
每一个列表项<li></li>
<ol></ol>
有序列表
每一个列表项<li></li>
<table></table>
表格
<th></th>表头
<tr></tr>表示行;
<td></td>表示tr中的列
colspan 横向合并n个单元格,colspan=""置于th、td开始标签中
rowspan 纵向合并n个单元格
<form></form>
表单,如登陆、注册类提交类的就是表单
属性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="提交"/>
<label></label>
为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类型时不只可以用于表单,其他模块也可以用
<iframe></iframe>
内嵌一个文档/网页
属性src,width,height
<abbr></abbr>
当鼠标停在缩写上时,指示简称或缩写的含义,为浏览器、拼写简称及搜索引擎提供有用信息
属性title
<center></center>居中
将包括的文本水平居中
<strong></strong>
强调文本的一部分,有加粗效果
<dl></dl>
表示定义一个列表,可用于解释性内容
<dt></dt>表示列表标题
<dd></dd>表示列表项目描述