HTML进阶篇

最新推荐文章于 2021-09-10 12:00:02 发布

笑谈风声i

最新推荐文章于 2021-09-10 12:00:02 发布

阅读量351

点赞数

分类专栏：前端学习笔记文章标签： HTML 前端

本文链接：https://blog.csdn.net/qq_28218493/article/details/103079236

版权

前端学习笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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>

图像映射： 在<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中的转义字符）可以解决以上的问题。
在这里插入图片描述

13.HTML速查列表

HTML速查列表

在这里插入图片描述

笑谈风声i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML进阶篇

HTML笔记1.HTML基础标题： HTML 标题（Heading）是通过<h1>到<h6> 标签来定义.<h1>为一级标题，字号最大。<h7>无效。段落： HTML 段落是通过标签 <p> 来定义.链接： HTML 链接是通过标签 <a> 来定义. 例如：<a href=“http://www.baidu.c...
复制链接

扫一扫

专栏目录