HTML笔记 ---kalrry

元素分类

html元素按照显示方式不同分为三大常规类：块级元素、行内元素、行内块元素，还有一种特殊类弹性元素flex

内联(行内)元素：inline
块元素：block
内联(行内)块元素：inline-block
弹性元素：flex

作用	标签	备注
块级元素	例如：h、p、div、ul、ol、li等	属性：独占一行 高度、宽度、内外边距都可控制 宽度默认为容器(父级)的100% 是一个容器盒子，可以放行内或者块级元素 文字类的元素内不能使用块级元素，如p、h等
行内元素 也称内联 元素	例如：a、strong、b、em、i、del s、ins、u、span等	属性：一行内可容纳多个，且无法设置宽高 宽度由元素的内容决定 行内元素只能容纳文本和其它行内元素 注意：链接里面不能再放链接，可放块级元素
行内块元素	例如：img、input、td等	和相邻行内块元素在一行上，但之间会有间隙，一行可显示多个 宽度由元素的内容决定(行内元素特点) 高度、宽度、内外边距可控(块级元素特点)

作用	CSS	备注
行内元素转 换成块级元素	display:block	如将a行内元素转 换成块级元素
块级元素 转换成行内元素	display:inline	如将div块级元素转 换成行内元素
行内元素转换成行内块元素	display:inline-block	如将span行内元素转 换成行内块元素

常用元素汇总

序号	作用	标签	备注
001	标题标签	<h1> ~ <h6>	权重1>6
002	段落标签	<p>	paragraph的缩写
003	换行标签	<br />	单个存在，break的缩写
004 文本格式 化标签	加粗	<strong>或<b>	推荐用strong，语义化强
	倾斜	<em>或<i>	推荐用em，语义化强
	删除线	<del>或<s>	推荐用del，语义化强
	下划线	<ins>或<u>	推荐用ins，语义化强
005 盒子标签	盒子1	<div>	用来布局，独占一行，division分割分区的缩写
	盒子2	<span>	用来布局，横向排布，跨度跨距的意思 span通常嵌套在div中
006	图像标签	<img src="URL" />	单个存在，image的缩写 src属性指向图像URL地址 alt属性是在无法加载图像的情况下显示alt下的文本 title属性当鼠标放在图像上时显示title下的文本 width与height属性设置图像宽度和高度
007	超链接标签	<a href="URL" /> text <a>	anchor锚的缩写 href属性指向要链接的URL地址 target属性_self是默认值，在当前窗口打开链接 target属性_blank是在新窗口中打开链接
008	注释标签	<!-- 注释 -->	养成给代码写注释的好习惯
009	特殊字符	点击跳转	转义字符表
010 表格标签	表格框	<table>	align=""；left、center、right；表格对齐方式 cellpadding：规定单元格与文字之间的距离，默认为1像素 cellspacing：规定单元格之间的距离，默认为2像素 width、height更改宽高 这些在以后都放在css样式里面去调整
	表头部	<th>	<th>
	表格行	<tr>	<!-- 注释 -->
	单元格	<td>	td指表格数据table data，即单元格内容数据
	合并行	rowspan=num	纵向跨行
	合并列	colspan=num	横向跨列
	表格结构标签	<thead><tbody>	表格结构标签，便于阅读和查找定位
011	无序列表	<li>包含于<ul>	应用范围很广 <ul>为父级；<li>为子级 <ul>里面只能放<li>标签 <li>可以放任何标签标签，相当于容器
012	有序列表	<li>包含于<ol>	应用于表达逻辑顺序的列表中 <ol>为父级；<li>为子级 <ul>里面只能放<li>标签 <li>可以放任何标签标签，相当于容器
013	自定义列表	<dt>与<dd>包含于<dl> <dt>是表头<dd>是内容	大部分应用于网页底端列表进行名词、术语描述 <dl>为父级；<dt>为表头；<dd>为子级 <dl>里面只能放<dt>和<dd>标签 <dt>和<dd>没有个数限制 <dt>为表头与<dd>为兄弟关系
014 表单 form	表单域	由<form>定义	一个完整的表单由表单域、表单控件、提示信息三部分组成 <form action="URL" method="get或post提交方式" name="表单名称">
	表单控件 也称表单元素	<input> <select> <textarea>	<input>四大属性：name、value、checked、maxlength type属性值：button、checkbox、file、hidden、image、password radio、reset、submit、text <select>下拉表单元素：<option> <textarea>文本域表单元素：可以定义多行文本输入一般用于留言或介绍 <textarea>包含两个参数：cols每行中的字符数与rows显示几行 实际使用中都是通过CSS来调的，基本不用cols与rows
	提示信息
015	表单标签	<label>	通过<label>的for属性链接input的id属性来完成用户体验操作