HTML基础（学习笔记）
前言
勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。
本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。
01
头部添加
图片
1.搜索的关键词：<meta name="keywords" content="关键词">
2.页面的描述：<meta name="description" content="描述">
02
路径
图片
1.绝对路径：磁盘地址或网页地址两种形式
2.相对路径：
①同级目录：直接写文件名字
②下一级：/
③返回上一级："../" ; 如果要返回多级，就需要写多个"../"
03
标签
图片
一：盒子
1.大盒子：div
2.小盒子：span
二：图片（img）属性
1.alt：图片不显示时所显示的文字
2.title：鼠标放在图片上显示的文字
三：文字（前者比后者权重更大）
1.<strong>加粗</strong>
<b>加粗</b>
2.<em>斜体</em>
<i>斜体</i>
3.<del>删除线</del>
<s>删除线</s>
4.<ins>下划线</ins>
<u>下划线</u>
四：预处理（pre）
<pre></pre>标签之间的字符按照编辑器中的格式在浏览器中显示
五：超链接
1.target（默认为：_self）：
①_self(在当前页面打开)
②_blank(在新页面打开)
2.href中的值：
①具体跳转的网址：href="http://www.baidu.com"
②刷新：href=""
③回到顶部：href="#"
④禁止跳转：href="javascrip:;"
⑤锚点跳转：
<div id="goods">模块一</div>
<a href="#goods">跳转到模块一</a>
六：表格
<table align="center" border="1" width="600" height="400" cellpadding="0" cellspacing="0">
<caption>表标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>张二</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">合计</td>
</tr>
</tfoot>
</table>
注：
1.其中thead、tbody、tfoot可以省略，但省略后会严格按照代码顺序显示表格而不分表头、表体、表位的顺序
2.cellpadding="0"：内容到单元边框的距离
3.cellspacing="0"：单元格到单元格的距离
4.colspan合并行；rowspan合并列
七：列表
1.有序列表（有序号在每行前面）
<ol>
<li>哈哈</li>
<li>嘻嘻</li>
<li>呵呵</li>
</ol>
2.无序列表（每行的前面是小圆点、小圆圈、小方块，默认形式是小圆点）
<ul>
<li>哈哈</li>
<li>嘻嘻</li>
<li>呵呵</li>
</ul>
3.自定义列表
<dl>
<dt>嗯嗯</dt>
<dd>哈哈</dd>
<dd>嘻嘻</dd>
<dd>呵呵</dd>
</dl>
八：表单
<!-- 表单 -->
<form action="" method="GET" name="baseMessage">
<!-- 文本输入框 -->
<input type="text" maxlength="4" placeholder="请输入用户名" name="userName" autofocus>
<!-- 密码输入框 -->
<input type="password" maxlength="8" placeholder="请输入用户名" name="psssword"><br />
<!-- 单选框 -->
<input type="radio" name="sex" value="男" id="man" checked><label for="man">男</label>
<input type="radio" name="sex" value="女" id="woman"><label for="woman">女</label><br />
<!-- 多选框 -->
<input type="checkbox" name="hobbby" value="游泳" checked>游泳
<input type="checkbox" name="hobbby" value="跑步">跑步
<input type="checkbox" name="hobbby" value="篮球">篮球<br />
<!-- 按钮 -->
<input type="button" value="我是一个按钮">
<button>我也是一个按钮</button><br />
<!-- 上传文件按钮 -->
<input type="file">
<!-- 日期选择框 -->
<input type="date">
<!-- 颜色选择框 -->
<input type="color">
<!-- 范围条 -->
<input type="range" >
<!-- 数字框 -->
<input type="number" placeholder="请输入数字">
<!-- 提交按钮 -->
<input type="submit" value="点击提交">
<!-- 重置按钮 -->
<input type="reset" value="点击重置">
</form>
注：
1.<form></form>之间为表单域；属性action：提交按钮的跳转地址，不填就是跳转到当前页面；属性name以区分多个表单
2.属性placeholder：输入框内的提示文字；属性autofocus：页面默认焦点
3.一组单选框或一组多选框的属性name值要相同；单选框必须添加name属性，才能达到单选效果；属性checked为默认选中
4.单选框或多选框与其后面文字关联：<input type="radio" id="man"><label for="man">男</label>
九：下拉框
<!-- 下拉框 -->
<select name="" id="">
<option value="" selected>北京</option>
<option value="" disabled>上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
注：
1.属性selected：默认选中的
2.属性disabled：不允许选中
十：文本域
<!-- 文本框 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
注：
1.属性cols：默认显示的行数
2.属性rows：默认显示的列数
发表评论 取消回复