HTML：超文本都是由标记（标签）组成的
属性：作用是修饰元素(标签)
- HTML必用标签
- body中常用的HTML标签和属性
结构标记
分区元素
链接
表格
列表
表单
通用标签
HTML必用标签（标记/元素）
<!doctype html>
<html lang="en">
<head>
<title>常用HTML标签和属性</title>
<meta charset="UTF-8">
</head>
<body>
第一次用markdown模式编写
</body>
</html>
<html></html>根元素,每个文档有且仅有一对根元素
<head></head>页面的头部元素，定义页面全局信息
<title>定义网页标题<title>
<meta charset="UTF-8" /><!--声明元数据编码，关键词，描述-->
<style></style><!--声明内部样式表-->
<link /><!--引入外部表-->
<script></script><!--定义或引入脚本文件-->
<body></body>页面内容元素
body属性(可忽略)：
<body text="grey" bgcolor="white"></body>
text：文本颜色;
bgcolor ：背景颜色；
body中常用的HTML标签和属性
结构标记
<header>头部内容</header>
<nav>导航</nav>
<section>小结</section>
<article>文章</article>
<footer>尾部</footer>
<aside>侧边，边栏</aside>
分区元素
块级元素（一般情况下，元素独占一行，元素前后都有自动换行，结构标记都属于块级元素）
<hn>标题元素</hn> <!--n=1~6,1级最大，6级最小-->
<p>段落标记</p><!--商用属性 align="left/center/right"-->
<div>层，主要用于布局</div>
行内元素（默认情况下，多个元素位于同一行，不会换行）
<span>行内元素作用：修改内部内容的样式</span>
<!--插入图片-->
必须属性：src
常用属性：width，height
链接
<a href="页面路径" target="_blank">文本或图像</a>
属性：
href: 链接URL
target：目标，指打开新网页的方式
取值：_blank:在新标签页中打开
_self: 在当前页面中打开（默认）
name：定义锚点名称
例：<a name="anchorName">文本或图片</a>
<a href="#anchorName">文本或图片</a>
<a href="url#anchorName">链接到另一个页面的摸个位置</a>
表格
<table></table>定义表格
<tr></tr>定义行
<td>创建单元格</td>
<table>
<caption>标题文本</caption>
<thead>
</tr><!--先有行-->
<td>列在行内</td>
<td></td>
</tr>
</thead>
<tbody>
</tr>
<td>列在行内</td>
<td></td>
</tr>
</tbody>
<tfoot>
</tr>
<td>列在行内</td>
<td></td>
</tr>
</tdoot>
</table>
表格标题：
<caption>标题文本</caption>
行分组：
<thead>表头</thead>
<tbody>表主体</tbody>
<tfoot>表尾</tfoot>
table属性:
width：表格宽度
height：表格高度
align:水平对齐方式(left,center,right)
border:设置表格的边框
cellpadding:内边距(单元格边框与内容之间的距离)
cellspacing:外边距（单元格与单元格之间的距离）
bgcolor:背景颜色
tr属性:
align:left/center/right;
valign:设置该行内容的垂直方式（top,middle,bottom）
td属性
align：left/center/right;
valign: top,middle,bottom;
width: 单元格宽度
height:单元格高度
colspan:单元格跨列（向右合并单元格）
rowspan:单元格跨行（向下合并单元格）
列表
1.有序列表
<ol type="A" start="1">
<li>苹果</li><!--列表项-->
<li>香蕉</li>
<li>菠萝</li>
</ol>
属性：
type：列表类型
取值：1(数字默认类型)
a(小写字母)
A(大写字母)
i(小写罗马数字)
I(大写罗马数字)
start：起始编号
2.无序列表
<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
属性：
type：列表类型
取值：disc:实心圆（默认）
circle：圆环
square：实心矩形
3.自定义列表
<dl>
<dt>列表内容标题</dt>
<dd>列表数据</dd>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
</dl>
表单
<form action="url" method="get/post" enctype="表格数据的编码方式" name=“定义表单名称”>
1. <input type="text " value=" " name=" " id=" "/><!--文本框-->
2. <input type="password" value="" name=" " id=" "/><!--密码框-->
<!--以上两个控件的通用属性：maxlength:限制输入的字符数；readonly：设置控件为只读-->
3. <input type="radio" value="" name=" " /><!--单选按钮-->
4. <input type="checkbox" value=" " name=" " id=" " /><!--复选框-->
<!--以上两个控件的通用属性：checked(默认被选中)-->
5. <input type="submit" value="显示在按钮上的文字（提交/注册）"><!--提交按钮，type="reset''重置按钮，type="button"普通按钮-->
6. <input type="file" enctype="multipart/form-data" method="post"/><!--文件选择框-->
7. <input type="hidden" name=" " value=" " />
8. <select name="定义名称" size=" " multipe="设置多选">
<option value="选项的值:例：01" selected/*预选中*/>北京 </option>
<option value="02" >苏州</option>
</select>
9. <textarea name="名称" cols="10" rows="5" readonly/*只读*/>多行文本域</textarea>
10. <lable for="与该元素相关的控件的ID值">文本</lable>
</form>
属性：
type：可以创建各种类型的input元素，比如：文本框，密码框，单选按钮，复选框
value：当前表单元素的值，可以是提交给服务器的值，也可以是默认显示的初始值
name：名称，要提交给服务器去使用
id：唯一标识，只能在当前页面使用，服务器不能用
通用属性
id: 定义每个标签的唯一标识
title: 提示文本
class: 样式相关，类样式
style: 样式相关，行内样式
网友评论