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>
浙公网安备 33010602011771号