HTML标签
纯手工打造 学习过程中记录 并且在最后标注有不常用标签查阅途径
骨架介绍
<!DOCTYPE hyml> 类型声明
<html lang="en"></html> 骨架以及语言的声明
<head></head> 网页头部
<meta charset="UTF-8"> 声明字符集
<title></title> 网页名称
<body></body> 网页内容
文本中常用
<h1></h1> h1-h6分别代表一到六级标题,标题独占一行
<p></p> 段落标签
<br /> 换行标签
<strong></strong> <b></b>加粗标签
<em></em> <i></i> 斜体标签
<del></del> <s></s> 删除标签
<ins></ins> <u></u> 下划线标签
<div></div> 盒子,无语意 大盒子,自己独占一行,用于布局
<span></span> 盒子,无语意 小盒子,一行可以有多个,用于布局
图像标签
<img src="文件名" /> 图像标签,src是图片标签的必要属性,用于指定图片文件的路径和文件名
图像标签中,可添加属性:(属性之间不分先后顺序,但必须写在标签名的后面,之间以空格隔开)
alt=" 图片显示不出来时用文字替换 " 例如:<img src="文件名" alt=" 图片显示不出来时用文字替换 " />
title="鼠标放在图片上时的提示文本" 例如:<img src="文件名" title="鼠标放在图片上时的提示文本" />
width="给图像设定的宽度" 例如:<img src="文件名" width="给图像设定的宽度" />
height="给图像设定的高度" 例如:<img src="文件名" height="给图像设定的高度" />
border="给图像设定边框的粗细" 例如:<img src="文件名" border="给图像设定边框的粗细" />
超链接标签:
<a href="跳转链接目标的地址" target="目标的弹出方式,_self为默认值,为在当前窗口打开,_blank为在新窗口中打开方式"
<a href="http://www.baidu.com">baidu</a> 当使用外部链接时,必须加前缀http://
<a href="index.html">首页</a> 当使用内部链接时,直接链接内部页面名称即可
<a href="#">首页</a> 未确定链接目标时,可使用#表示空连接
<a href="img.exe">首页</a> 当href的地址里面是一个文件或压缩包时,会直接下载这个文件
<a href="http://www.baidu.com"><img src="文件名" /></a>为网页元素添加一个超链接。这里是为图片添加超链接。
<a href="#目标位置的代号"> 目标位置:<h1 id="目标位置的代号">...</h1> 锚点链接(用于同页面跳转)
<!-- --> 注释标签,快捷键:ctrl+/
表格标签
<table></table> 定义表格的标签
<tr></tr> 定义表格中的行,必须在<table></table>里使用
<td></td> 定义表格中的单元格,必须在<tr></tr>里使用
<th></th> 表头单元格,用于加粗居中显示表格数据
表格标签的属性(作为了解即可,实际开发用css实现)
<table align="left/center/right"></table> 表格的对齐方式,align=”任选一个条件“
<table border="1"></table> 给表格加边框,border=”边框的粗细“
<table cellpadding="单元格中的内容与单元格边框的距离,默认1像素"></table>
<table cellspacing="单元格之间的空表,默认2像素"></table>
<table width="像素值或百分比,规定表格的宽度"></table>
<table height="像素值或百分比,规定表格的高度"></table>
表格的结构标签
<thead></thead> 表示表格的头部,用于更好的表示语义
<tbody></tbody> 表示表格的主体区域,用于更好的表示语义
合并单元格(合并以后要删除多余单元格)
<td rowspan="合并单元格的个数" ></td> 跨行合并
<td colspan="合并单元格的个数" ></td> 跨列合并
列表标签
列表用于整体布局,分为无序列表,有序列表和自定义列表。
无序列表(重点)ul中只能放li,但li中可以放任意标签
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
......
</ul>
有序列表(理解即可)
<ol>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
......
</ol>
自定义列表(重点)对术语或名词进行解释或描述 dl中只能包含dt和dd dd和dt个数没有限制
<dl>
<dt>名词一</dt>
<dd>名词一解释一</dd>
<dd>名词一解释二</dd>
<dd>名词一解释三</dd>
</dl>
表单标签
表单:用于收集用户信息。由表单域,表单控件(表单元素)和提示信息三部分构成
表单域:一个包含表单元素的区域,用于实现用户信息的收集和传递
对应标签:
<form action="地址" method="get/POST(传递方式)" name="表单名称">
</form>
表单控件:分为 输入表单元素,下拉表单元素和文本域元素
1.输入表单元素:
标签:<input type="属性值" /> 设置不同的属性值用来指定不同的控件类型
属性值对应控件类型:
text:文本框 用户可输入任何文字
password:密码字段 输入的内容被掩码
radio:单选按钮可以实现多选一
checkbox:复选框 可以选多个
submit:提交按钮 将表单数据(表单域中的表单元素里面的值)发送到服务器
reset:重置按钮 将表单数据(表单域中的表单元素里面的值)重置为默认状态
button:普通按钮 结合后期JS搭配使用
file:文件域 上传文件时使用
使用较少:
hidden:定义隐藏的输入字段
image:定义图像形式的提交按钮
其他表单标签:(辅助功能)
name:定义input元素的名称 常用于实现多选一,也用于多选 单选按钮和复选框是同一组时要有相同的name值
value:规定input元素默认出现的值 可用于展示或更改提示信息
checked:单选框和多选框可设定的属性,当页面打开时就可以默认选中这个属性 checked=”checked“
maxlength:规定输入字段中最大字符长度
label标签:<label> </label> label标签中的for属性应当与相关元素的id属性相同
用于绑定一个表单元素,当点击标签内的文本时,浏览器会自动将焦点转到对应的表单元素上以提高用户体验
例如:<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
2.下拉表单元素
标签:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
当给<option>选项</option>中添加一个selected=”selected“时,可以将该项设置为默认选中项
3.文本域元素
<textarea>
这里面的字会在实际效果中展示
</textarea>
用于输入较多内容,可加参数:cols=”每行可显示字数“,rows=”可显示行数“(不常用,开发时会用CSS实现)
查阅文档
百度:http://www.baidu.com
W3C: http://www.w3school.com.cn/
mdn: https://developer.mozilla.org/zh.CN/