标题标签h:
html中一共有六级标签 —> h1最大 h6最小
6级标题中 h1最重要 表示一个网页中的主要内容 h2到h6的重要性依次递减
对于搜索引擎来说,h1的重要性仅次于title。搜索引擎检索完title,会立即查看h1中的内容。h1会影响页面在搜索引擎中的排名。
一个页面只能写一个h1
段落标签p:
p标签独占一行
换行标签br和水平线标签hr:
在html中,字符之间写再多空格,也只当做一个空格解析。换行也当做一个空格解析。
使用br换行(自结束标签),多个br标签可以连续使用,使用了多少个br标签就会换多少行。
hr在页面中生成一条水平线(自结束标签)
图片标签img:
使用img标签向网页中引入外部图片
<img src='url' alt='text' width='200' height='200'/>
1. text:
当图片无法显示时的替换文字。而且搜索引擎通过alt中的文字来识别不同的图片。如果不写alt属性,则搜索引擎不会对img中的图片进行收录。
2.width和height:
用来设置图片的宽高。默认单位是px。
(当宽度和高度属性只设置一个时,另一个也会同时等比例调整大小。)
手动指定图片的宽高,可能会导致图片变形。只指定其中一个(宽or高)不会变形
3. title:
当鼠标悬停在图片上时,弹出的提示框中显示的内容
4.图片的格式:
JPEG(JPG) :支持的颜色多,可压缩,不支持透明。一般用来保存照片等颜色丰富的图片。
GIF:支持动态图,支持的颜色少,支持简单的透明。一般在颜色图片单一或动态图时使用GIF。
PNG:支持的颜色多,支持复杂的透明。用来显示颜色复杂的透明图片。
图片的使用原则:效果不一致,使用效果好的。效果一致,使用小的。
路径:
相对路径:都是从当前.html文件所在的文件夹开始查找
1.同级:图片和.html文件存储在同一个文件夹中
格式:src=“QRCode.jpg” 在.html文件所在的文件夹中寻找名为QRCode.jpg的图片
2.下级:存储图片的文件夹和.html文件存储在同一个文件夹中
格式:src=“images/QRCode.jpg” 在.html文件所在的文件夹中寻找名为images的文件夹,然后在images文件夹中寻找名为QRCode.jpg
3.上级:图片所在的位置和存在.html文件的文件夹在同一个文件夹中
格式:src="…/QRCode.jpg" 在.html文件所在的文件夹中找到该文件夹所在的上一级文件夹,然后在上一级文件夹中寻找图片
使用 …/ 返回当前html所在的上一级目录
绝对路径:从指定的盘符开始查找
格式: src=“C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg”
使用路径要注意的问题:
路径中不要出现中文,否则可能出现未知的问题
通过相对路径指定图片,不能跨盘符。例如.html文件在C盘, 那么不能去查找D盘图片
路径使用反斜杠/,不要使用正斜杠\。
超链接a:
一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时,链接显示为红色并带有下划线。
1. href 属性:
指定链接的地址 <a href="url">链接文本或图片等</a>
2.实现点击超链接后不跳转:
1.<a href="javascript:;">内容</a>
2 在onclick响应函数的最后,return false 取消默认行为
3.href=’#’ 点击该超链接,会自动跳转到当前页面的顶部。
3.锚点:
href=’#id名’ 可跳转到当前页面具有该id名的元素位置处。
使用锚点,直接跳转到指定位置,不会出现过度的滚动动画。
在url后添加#id名,可以直接跳转到指定url的指定id名所在的位置。
如 <a href="13-锚点测试界面.html#bottom" target="_blank">
跳转到锚点测试界面` 跳转到该html文件中id名为bottom所在的位置
4.发送邮件的超链接mailto:
点击链接后会自动打开计算机中默认的邮件客户端,并将收件人自动设置为mailto后的邮箱地址(abc@163.com)。
5.target属性:
用来指定打开链接的位置: 默认target=’_self ’ 在当前页面打开
target="_blank" 在新窗口打开链接的文档(网页)
target = ‘name’ name是内联框架中name属性的值,可以在内联框架中打开链接。
6.title属性:
和img标签中的title属性相同,都是控制鼠标悬停时提示框中显示的内容。
7.base标签:
放在head标签中,用来统一指定超链接的打开方式
如<base target="_blank">
则该网页中所有超链接都在新窗口中打开。
如果同时在head中的base标签和body中的a标签中指定a的打开方式,按照a的打开方式执行。
列表:
1.无序列表ul:数据无先后之分
ul中最好只包含li标签,但是在li标签中可以继续添加其他标签。
默认用粗体小黑圆圈标记(disc),通过type属性修改项目前符号,但是一般在css中修改。
应用场景:新闻列表 / 商品列表 / 导航条等。
<ul>
<li>需要显示的条目内容</li>
<li>需要显示的条目内容</li>
<li>需要显示的条目内容</li>
<li>需要显示的条目内容</li>
</ul>
2.有序列表ol:数据有先后之分
<ol>
<li>演员</li>
<li>小丑</li>
<li>女人不应该让男人太累</li>
<li>男人不应该让女人流泪</li>
</ol>
3.自定义列表dl:
应用场景: 做网站的尾部信息 / 图文混排
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
//dt(definition title), 定义列表中的标题
//dd(definition description), 定义标题对应的描述
//一个dt可以没有对应的dd,也可以有多个对应的dd,建议使用一个dt对应一个dd
表格标签table:
<table> //table代表整个表格
<tr> //tr是表格中的一行
<td>需要显示的内容</td> //td是一行中的一个单元格
</tr>
</table>
注意:表格标签有一个边框属性,这个属性决定了边框的宽度。默认情况下这个属性的值是0, 所以看不到边框
1.table的属性:
<!--
1.宽度和高度的属性:table标签和td标签使用
1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
1.2如果给td标签设置widht/height属性, 会修改当前单元格所在行/列的宽度和高度, 不会影响整个表格的宽度和高度
2.水平对齐align:table标签 , tr标签和td标签使用
table的align属性:控制表格在水平方向的对齐方式
tr的align属性:控制当前行中所有单元格内容的水平方向的对齐方式
td的align属性:控制当前单元格中内容在水平方向的对齐方式
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
3.垂直对齐valign:只能给tr标签和td标签使用
tr的valign属性:控制当前行中所有单元格中的内容在垂直方向的对齐方式
td的valign属性:控制当前单元格中的内容在垂直方向的对齐方式
注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
3.外边距和内边距的属性:只能给table标签使用
3.1.外边距cellpadding:单元格和单元格之间的距离 默认情况下是2px
3.2 内边距cellspacing:单元格的边框和文字之间的间隙 默认情况下是1
-->
<table border="1" width="300px" height="300px" align="right" cellspacing="12px" cellpadding="1">
<tr valign="bottom">
<td width="50px" height="50px">1.1</td>
<td valign="top">1.2</td>
</tr>
<tr align="center">
<td align="right">2.1</td>
<td>2.2</td>
</tr>
</table>
2.表格标题caption和表头th
<!--
1.表格标题caption
将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
注意点:caption一定要写在table标签中, 否则无效, 并且要紧跟在table标签后面
2.标题单元格标签th(表头:表格第一行)th标签在单元格中 自动居中+文字加粗
3.td:存储数据 th:存储当前列的标题
-->
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
<img src="images/up.jpg">
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
<img src="images/up.jpg">
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
3.表格的结构
表格分为:标题caption+ 表头thead + 主体tbody + 页尾tfoot
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
//如果没写tbody, 系统会系统添加tbody
//如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化
//tr并不是table的子元素 而是tbody的子元素 通过 table > tr 无法选中行 只能通过 tbody > tr 选中行
4.合并单元格
<!--
1.水平方向上的单元格合并colspan 把某一个单元格当做多个单元格来看待(水平方向)
例如:
<td colspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
注意点:
1.由于把某一个单元格当做了多个单元格来看到, 会多出一些单元格, 所以需要删掉一些单元格才能正常显示
2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
2.垂直方向上的单元格合并rowspan属性 把某一个单元格当做多个单元格来看待(垂直方向)
例如:
<td rowspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
-->
<table bgcolor="black" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<!--<td></td>-->
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单标签form:
表单的结构和常用表单项:
<form>
<!--文本输入框-->
账号:<input type="text"><br>
<!--密码输入框-->
密码:<input type="password"><br>
<!--value属性设置默认值-->
账号:<input type="text" value="jiaody"><br>
<!--单选框:默认情况下单选框不会互斥(互斥指只能选中一个), 要想单选框互斥,必须给每一个单选框标签都设置一个name属性(name属性值相同的是一组,在同一组中的单选框会互斥) -->
性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
<!--多选框-->
爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
<!--定义一个普通按钮-->
<input type="button" value="我是按钮" >
<!--
定义重置按钮:清空表单中的数据
注意点:
重置按钮有默认的按钮标题, 默认叫做 重置
也可以通过value属性来修改默认标题
-->
<input type="reset" value="清空">
<!--
表单提交按钮: 将表单中的数据提交到远程服务器
注意点:
要想把表单中的数据提交到远程服务器,必须满足两个条件
1.告诉表单需要提交到哪个服务器(form标签的action属性)
2.只有设置name属性的表单项才会被提交
-->
<input type="submit">
<!--
隐藏域:不会出现在界面中 但是如果设置name属性,在表单提交时会以键值对的形式提交
-->
<input type="hidden" name="aaa" value="it666">
</form>
<!-- 表单:将用户信息提交给服务器 (应用场景:搜索引擎的搜索框 注册登录等)
form标签中有action属性,指向的是一个服务器的地址。
当提交表单时会提交到action属性对应的地址
input
type='text' (默认)单行文本框 (value属性是默认值)
type='password' 密码框 (value属性是默认值)
type='radio' 单选按钮
type='checkbox' 多选按钮
type='button' 按钮
type='reset' 重置按钮
type='submit' 表单提交按钮 (默认提交按钮的文字是“提交”,通过value属性可以改变)
type='hidden' 隐藏按钮 不会在页面中显示 设置name属性可以提交
单选和多选按钮都通过name属性进行分组 name相同的是一组
默认选中 checked='checked'
如果属性的取值和属性的名称一样(checked = 'checked'),可以简写(checked),但是在XHTML中必须写上取值
需要用户选择但是不需要用户直接填写内容的表单项(单选和多选等) 还必须指定一个value属性,这样被选中的表单项的value属性将会最终提交给服务器
如果希望表单项的数据提交到服务器中还需给表单项设置name属性
用户填写的信息会附在url地址后 以查询字符串的形式发送给服务器:url地址?查询字符串
格式: 属性名=属性值&属性名=属性值&属性名=属性值
-->
表单标签:h5
<!--
可以自动校验输入的内容是否符合邮箱的格式
-->
邮箱:<input type="email"><br>
<!--
可以自动校验输入的内容是否是URL地址
-->
域名:<input type="url"><br>
<!--
输入框中只能输入数字
-->
电话:<input type="number"><br>
<!--
可以通过日历来选择时间
-->
时间:<input type="date"><br>
<!--
可以通过取色板来选择颜色
-->
颜色: <input type="color"><br>
label标签:
<!--
label标签的作用:点击输入框前的文字时,使对应的输入框聚焦(将文字和输入框绑定在一起)
绑定的格式:
1.将文字用label标签包裹起来,并添加for属性
2.给输入框添加id
3.label中for属性值和input中id属性值相同的会绑定在一起
-->
<form action="">
<label for="account">账号:</label><input type="text" id="account"><br>
<label for="pwd">密码:</label><input type="password" id="pwd"><br>
</form>
待选项datalist:
<!--
datalist标签: 给输入框绑定待选项(当点击输入框或者输入不完整的内容时,会在输入框下方弹出待选项)
格式:
<datalist>
<option>待选项内容</option>
</datalist>
给输入框绑定待选列表:
1.添加一个输入框,设置list属性
2.添加一个datalist列表,添加id,属性值和输入框的list属性值相同
-->
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
下拉列表select和多行输入textarea:
<!--
select标签:下拉列表(不能输入内容, 但是可以直接在列表中选择内容)
selected属性 默认选中
格式:
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
textarea标签: 多行输入框
格式:
<textarea>
</textarea>
注意点:
1.默认情况下多行输入框可以无限换行,有自己的宽高,并且可以手动拉伸
2.可以通过cols和rows来指定输入框的宽度和高度, 指定以后还可以无限往下输入
-->
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
<option>黄浦区</option>
</optgroup>
</select>
<hr>
<textarea cols="20" rows="5">
</textarea>
分组fileset和分组标题legend
fieldset标签会在包含的文本和input等表单元素外面形成一个方框,legend元素作为标题。
表单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<fieldset>
<legend>用户信息</legend>
<p>
账号:<input type="text" name="account">
</p>
<p>
密码:<input type="password" name="pwd">
</p>
<p>
性别:<input type="radio" name="sex" value="male" checked>男</input>
<input type="radio" name="sex" value="female">女</input>
<input type="radio" name="sex" value="baomi">保密</input>
</p>
<p>
爱好:<input type="checkbox" name="hobby" value="basketball">篮球</input>
<input type="checkbox" name="hobby" value="soccer" checked>足球</input>
<input type="checkbox" name="hobby" value="run">跑步</input>
</p>
<p>
简介:<textarea name="desc" cols="30" rows="5"></textarea>
</p>
<p>
生日:<input type="date" name="birthday">
</p>
<p>
邮箱:<input type="email" name="email">
</p>
<p>
电话:<input type="number" name="phoneNum">
</p>
<p>
<input type="submit"> <input type="reset">
</p>
</fieldset>
</form>
</body>
</html>
value和name属性
单选和多选框,必须设置name属性值相同才能分到一组。
按钮的value属性,设置的是按钮上的文字。
除了按钮,其他表单项的value属性是表单提交时的值。
只有设置了name属性的表单项,才能被提交。