HTML基础
HTML是超文本标记语言,是一门标记语言,是一套标记标签,HTML使用标签来描述网页
1、HTML基本结构及书写规范
HTML书写规范
1.名字用小写字母
2.以英文开头,可以包含英文字母,数字,_,-,不能使用中文
3.驼峰命名
className 第二个单词首字母大写
4.id命名
id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样
5.class命名
class可以出现多次,而且相同的名字可以有多个,相当于人名一样
标签名+tab:自动补全命令
2、常用的HTML标签(元素)
①标题标签 (独占一行,一般在文章的开头)
<h1> </h1>...... <h6> </h6>
一个页面h1标签一般只出现一次
②段落标签 (段落之间空一行)
<p> </p>
③加粗标签 (字体加粗)
<b></b> 只是物理加粗
<strong> </strong> 不仅加粗,还有利于seo搜索
④斜体标签 (字体倾斜)
<i> </i> 只是物理斜体
<em> </em> 不仅斜体,还有利于SEO搜索
⑤换行标签(单标签)
<br> 或<br/> 文档内容换行
⑥水平线标签(单标签)
<hr> 在文档中添加一条水平线
⑦特殊符号
>; 大于号
<; 小于号
 ; 空格符号(连续多个只空一位)
&emsp; 空位符号
&; &字符
©; 版权符号
⑧a标签 (链接)
<a href="(地址)" target="(_self当前页面打开,_blank新页面打开)"></a>
<a href="#"></a> 刷新当前页面
<a href="javascript:void (0)"></a> 死链接
<a href="#name" ></a> 锚点(跳转到指定name或id的位置)
⑨图片标签 (单标签)默认图片大小,宽度和高度只指定一个值时,会等比缩放
<img src="路径" alt="图片描述,用于seo的搜索" width="宽度" height="高度" title="图片上面显示的文字">
⑩列表
无序列表
<ul>
<li type="disc(默认 小黑圆点),circle(空心圆),square(小方框)"></li>
</ul>
有序列表
<ol reversed(降序排序) start="有序列表排序起始值">
<li type="1(默认 阿拉伯数字),a(小写英文字母),A(大写英文字母),I(罗马数字),i(小写罗马数字)"></li>
</ol>
自定义列表
<dl>
<dt>列表标题</dt>
<dd></dd>
</dl>
⑪行内元素和块级元素(display:block(块级元素),inline(行内元素),inline-block(行内块级),none(隐藏))
1、块级元素div display:block;
可以包含任何块和行内元素独占一行,支持设置宽高
如果没有设置宽高,高度由内容撑开,宽度默认浏览器宽度
没有内容,在网页上肉眼看不到东西,但是审查元素,宽度是浏览器宽度,高度0
2、行内(内联)元素span display:inline;
可以和其他行内元素位于同一行
行内元素不要包块级元素不支持设置宽高
内容撑开宽高
3、行内块元素 display:inline-block;
块级元素可以横排展示
行内元素可以设置宽高
元素既能设置宽高 也能排在一排
4、display:none
隐藏元素,包括他的子标签,在页面中不占位置,等同于消失了,可以设置特定条件显示出来
<div></div>(块级)
<span></span>(行内)
⑫table表格(boder-collapse:collapse合并边框)<table border="边框">
<thead(表头)>
<tr(行)>
<th(单元格,加粗居中)></th>
</tr>
</thead>
<tbody(表身)>
<tr(行)>
<td(单元格)rowspan=“往下合并行”></td>
<td(单元格)colspan=“往右合并列”></td>
</tr>
</tbody>
<tfoot(表脚)>
<tr(行)>
<td(单元格)></td>
</tr>
</tfoot>
</table>
⑬form表单(用于前后台交互)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> textarea{ resize: none;/*禁止调整文本域*/ resize: horizontal;/*可以调整水平方向*/ resize: vertical;/*可以调整垂直方向*/ } </style> </head> <body> <form action="" method="get" autocomplete="on"> action 指定当前提交表单向何处发送表单数据 method 默认get post autocomplete自动完成,on输入框会提示 off输入框不会提示 账号:<input type="text" name="user" value="默认" readonly><br> 密码:<input type="password" name="pad" placeholder="请输入你的密码(提高用户体验)" required><br>required为必填字段 文件上传: <input type="file"><br> 隐藏: <input type="hidden"><br> 单选框: <input type="radio" name="gender" disabled>男(disabled时不能被选中) <input type="radio" name="gender" id="woman"> <label for="woman">女</label>(使用label标签时点击包含在标签内的文字也能选中,提高用户体验) <input type="radio" name="gender" id="sec"> <label for="sec">保密</label><br> 多选框: <fieldset> <legend>兴趣</legend> <input type="checkbox" name="hobby">唱歌 <input type="checkbox" name="hobby">跳舞 <input type="checkbox" name="hobby" checked>看书 <input type="checkbox" name="hobby" disabled>游戏 <input type="checkbox" name="hobby" id="shopping"> <label for="shopping">逛街</label><br> </fieldset> disabled 禁止选 checked 默认选中 <select name="xz" id="xz" size="2"> size规定下拉列表中可见选项的数目 selected 规定在select里面默认展示的项 <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4" selected></option> </select><br> 文本域: <textarea name="wb" id="wb" cols="30" rows="10"> </textarea><br> <input type="submit" value="提交列表"><br>提交 <input type="reset">重置 </form> </body> </html>