一:语义标签
语义化:更好被理解,被收录,被阅读
1、<p></p>段落
2、<span></span>没有语义,为了设置单独的样式用的
<head>中:
<style>
span{color:blue;}
</style>
body中:
<p>德生科技放到上附近的开始就发就
<span>这块字是蓝色的</span>范德萨佛挡杀佛是佛挡杀佛
</p>
3、<h1></h1>....<h6></h6>字号逐渐变小
4、<div></div>:具有相同逻辑,相似布局的一组内容可以放到同一个div容器下
5、<header></header>定义头部区域,写到body中,不是head中,<header>标签和<head>标签没关系
6、<footer></footer>网站的尾部、底部
7、<section></section>定义一个区域。
8、<aside></aside>定义一个侧边栏区域。
二:效果标签
1、<br />换行
2、  空格,需要几个空格就是几个 
3、<hr />分割线
三、列表标签
1、<ul> <li></li> </ul> 没有顺序,前面是小黑点
2、<ol> <li></li> </ol>有前后顺序,前面是序号
四:图片、链接标签
图片:<img ..... />(输入img,编译器会提示的)
链接:
1、<a href="" title=""></a>
2、<a href="" title="" target="_self"></a> --------在当前页面打开
3、<a href="" title="" target="_bank"></a>------在新窗口打开
五:表格标签
1、<table border="1"></table>
2、<caption></caption>------表格标题
3、<tr></tr>-----一行
4、<th></th>----列,第一行上的列,表头,加黑加粗的
5、<td></td>---列,后几行的列,非表头
6、<thead><tbody><tfooter>表头、表身、表尾
加上这三个的好处:
(1)分组
(2)<table>是都加载完才显示的,而加上这些结构后tbody包含行的内容下载完优先显示,如果tbody很长,可以一部分一部分地显示
(3)如果分页显示,打印时加上head和footer的,每页都会有head和footer的内容
<table>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td><td></td></tr></tboody>
<tfooter><tr><td></td></tr></tfooter>
</table>
六:表单标签
表单:<form method="" action="" ></form>
1、<input type="" name="" value="" placehold="">
1.1、name为输入框命名
1.2、value默认值
1.3、placeholder,缺省
1.4、type为text,文本输入框
1.5、type为password,密码输入框
1.6、type为number时,只能输入数字,右边有递增递减按钮
1.7、type为url,数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。
1.8、type为email,输入框的类型为邮箱,必须有@,并且@之后有内容
1.9 type为radio,单选框;checkbox复选框
1.9.1、<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1.9.1.1、value为值;name为控件名;checked为选中状态
1.10 type为submit时,按钮有提交的作用 type="submit"value="提交" name="submitBtn">
1.11、type为reset时,重置 <input type="reset" value="重置">
2、<textarea rows="" cols="" placeholder=""></textarea>
2.1、rows行(高),cols列(宽),placeholder
3、<label for="控件id名称"></label>
3.1、input的id和label的for是同一个值
4、<select> <option></option> </select>---下拉框
<select>
<option value="看书">看书</option>
<option value="旅游" selected = "selected">旅游</option>
<option value="运动">运动</option>
<option value="购物" >购物</option>
</select>
网友评论