HTML笔记
1.HTML基础
标题: HTML 标题(Heading)是通过<h1>到<h6> 标签来定义.<h1>为一级标题,字号最大。<h7>无效。
段落: HTML 段落是通过标签 <p> 来定义.
链接: HTML 链接是通过标签 <a> 来定义. 例如:<a href=“http://www.baidu.com”>
图像: HTML 图像是通过标签 <img> 来定义.例如:<img src="/images/logo.png" width=“258” height=“39” />
注: 1.src路径也可以是网络链接。<img src=“https://ss3.bdstatic.com/xxxxxxxxxx/it/u&fm=26&gp=0.jpg”>
2.当图片目录和.html文件在同一目录下时,<img src=“xxx.jpg”>
3.当图片目录在B目录下,.html在A目录下,B也在A目录下,<img src=“B/xxx.jpg”>
4.当图片目录在B目录下,.html在A目录下,B和A都在C目录下,<img src=". ./B/xxx.jpg">
5.href和src的区别:href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。
src 表示来源地址,在 img、script、iframe 等元素上。src 的内容,是页面必不可少的一部分,是引入。
href 的内容,是与该页面有关联,是引用。
区别就是,引入和引用。
2.HTML元素
HTML的元素也即是标签。
为了规范性,成对出现的标签一定不要忘记结束标签,即使现在的浏览器兼容性很强。
换行: HTML 段落是通过标签 <br /> 来定义.最好不要漏掉"/"。
横线: HTML 横线是通过标签 <hr /> 来定义.最好不要漏掉"/"。
注释: <!-- 这是一个注释 -->。
3.HTML属性
- HTML 元素可以设置属性。
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
- 属性值应该始终被包括在引号内
- 查看完整的HTML属性列表: HTML 标签参考手册
- 下面列出了适用于大多数 HTML 元素的属性:
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
注:
- 属性和属性值,尽量小写,本来这样做也方便些。
- class 属性可以多用 class=" " (引号里面可以填入多个class属性)
- id 属性只能单独设置 id=" "(只能填写一个,多个无效)
4.HTML文本
属性 | 描述 |
---|---|
<b> </b> | 一般粗体 |
<strong> </strong> | 着重粗体 |
<i> </i> | 一般斜体 |
<em> </em> | 着重斜体 |
<small> </small> | 小字体 |
<sub> /sub> | 下标字 |
<sup> </sup> | 上标字 |
<ins> </ins> | 插入字 |
<del> </del> | 删除字 |
font标签: </font> 规定文本的字体尺寸、字体、字体颜色。
例如:
<p><font size="5" face="楷体" color="red">想想真好看</font></p>
显示结果:
想想真好看
5.HTML链接
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
- 例如:
<a href="https://www.runoob.com/">菜鸟教程</a>
<a href="https://www.bilibili.com/">菜鸟教程</a>
注:
- “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
- 链接的最后最好加一个"/"。否则服务器会自动添加一个"/",然后再发送一次HTTP请求。
target属性: </a> 标签里有一个target属性控制以何种方式打开链接。 - 例如:
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
以新的窗口打开链接。
访问菜鸟教程!
<a href="https://www.runoob.com/" target="_parent">访问菜鸟教程!</a>
在当前窗口打开链接。
访问菜鸟教程!
6.HTML头部
元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
base属性: 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base href="//www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面
上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里
我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
link属性: 标签常见的用途是链接样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我是通过样式文件 styles.css 渲染后显示的。</h1>
<p>我也是。</p>
</body>
</html>
7.HTML图像
在 HTML 中,图像由<img> 标签定义。
与<a>标签一样,<img> 标签也是属性标签,需要配合src等属性才能生效。
<img src="url" alt="图片加载失败" width="800" height="600">
其中,alt属性的作用是:在图片资源不存在或者因为网络原因没有加载出图片时,网页显示的提示文字。
图像链接: 在<a>标签里包住一个图像属性<img>就可以了。
<a href="https://www.baidu.com/">
<img border="0" src="https://i-blog.csdnimg.cn/blog_migrate/38425ef565f86e5b5a6368ec67487113.jpeg" alt="Pulpit rock" width="304" height="228">
</a>
![Pulpit rock](https://i-blog.csdnimg.cn/blog_migrate/38425ef565f86e5b5a6368ec67487113.jpeg)
图像映射: 在<area>标签可以把一个图像分割成n个小区块,每一个小区块可以单独设定一个链接,具体见 <area>标签。
8.HTML表格
属性 | 描述 |
---|---|
<table> </table> | 表格标签 |
<th> </th> | 列标题 |
<tr> </tr> | 行 |
<td> </td> | 列 |
<caption> </caption> | 表格标题 |
表格合并:
- 首先看一个完整3x4的表格
<table border="2">
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- 如果要合并第一列
- 首先定位到最先出现的表格,即第一行第一列
- 在第一行的第一列里添加: rowspan=“3” 即合并三行
- 删掉第二行第一列以及第三行第一列
下面是合并后的代码及结果:
<table border="2">
<tr >
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- 如果要继续合并第第二行的第三列和第四列
- 首先定位到最先出现的表格,即第二行第三列
- 在第二行的第三列里添加: colspan=“2” 即合并两列
- 删掉第二行第四列
下面是合并后的代码及结果:
<table border="2">
<tr >
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
9.HTML列表
列表的组成有列表类型和列表项组成。
列表的类型有无序列表<ul>和有序列表<ol>,列表项标签是<li>
有序列表 | 无序列表 |
---|---|
1.第一个列表项 2.第二个列表项 3.第三个列表项 | 列表项 列表项 列表项 |
无序列表: 用小圆圈表示。标签是<ul>
<ul>
<li>涛涛</li>
<li>想想</li>
</ul>
- 涛涛
- 想想
有序列表: 默认用阿拉伯数字表示,默认从1开始。标签是<ol>
- 可以用start属性指定初始值。
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
- 咖啡
- 牛奶
- 茶
- 可以用type属性指定序号是数字(type=“1”),字母(type="a"或者type=“A”),罗马数字(type=“I”)。
10.区块
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
常用的块级元素:
div元素: 最常用的块级元素,通常和css样式表结合使用。
span元素: 块级元素,与div的区别是不会换行,直至占满一整行。
11.HTML表单
HTML 表单用于收集不同类型的用户输入。
属性 | 描述 |
---|---|
<form> </form> | 表单 |
<input> | 输入标签,可以结合具体的输入要求 |
<input type="text" name="name"> | 任意字符文本框 |
<input type="password" name="pwd"> | 密码框 |
<input type="radio" name="sex" value="male" checked="checked">男 <input type="radio" name="sex" value="female">女 | 单选框 默认为男 |
<input type="checkbox" name="vehicle" value="Bike">自行车 <input type="checkbox" name="vehicle" value="Car">汽车 | 复选框 |
<select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="bmw" selected>BMW <option value="audi">Audi </select> | 下拉框 默认选中BMW (没有selected时默认选中第一个) |
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="提交"> </form> | 提交框 |
<input type="button" value="登录"> | 普通按钮 |
<input type="reset" value="重置"> | 重置按钮 |
注:
- 单选框和复选框是一组可供选择的属性,所以它们的name属性必须一致
- html5有个新的文本域标签<textarea> </textarea>,这个标签是独立的,不需要在form标签里,更不能在input标签里。多用于内容有多行时,text只能是单行。且textarea的文本框点击右下角可以自由拉伸。
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
rows定义文本框的初始行数,即高度。cols定义初始列数,即文本框的宽度。
12.HTML框架
使用框架,可以在同一个浏览器窗口中显示不止一个页面。
通过iframe标签来实现框架。
<iframe src="demo_iframe.htm" name="iframe_a" width="200" height="200" frameborder="0"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
通过点击a标签里的链接来改变iframe框里显示的内容
12.HTML字符实体
html文件中的小于号<和大于号>正常情况下是不会显示的,因为浏览器会默认其为标签。
html文件中的空格不能通过空格键输入的累加,只能算作一个。
实体字符(类似于c,java中的转义字符)可以解决以上的问题。