HTML的介绍和常见标签及其属性

最新推荐文章于 2024-04-12 16:19:09 发布

一个世俗人

最新推荐文章于 2024-04-12 16:19:09 发布

阅读量544

点赞数 3

文章标签： HTML HTML属性 HTML标签

本文链接：https://blog.csdn.net/weixin_45598555/article/details/100402084

版权

HTML的介绍

1.搭建网页的结构：html5.0
2.对页面的页面元素进行修饰，比如定位等。表现（CSS）
3.和页面的元素进行交互。行为（javascript,jQuery）
4.BootStrap(前段框架)—响应式布局
(1)、文件夹、文件命名规则：由英文字母、数字、下划线共同组成，数字不能开头，不能使用汉字作为文件名
我们书写标签的时候尽量以严格的方式来书写:
1）有结束标签的必须加结束标签
2）标签名尽量用小写
3）属性值必须加单引号或双引号
4）实现标签的正确嵌套
(2)、 https://www.runoob.com/菜鸟教程
(3)、HTML默认首页可以命名为：index或者default
(4)、HTML静态文件后缀名：.html或者.htm
5、HTML（HyperText Markup Language）：超文本标记语言
**注意：**HTML不属于编程语言，而是制作网页的基础语言，主要用于描述超文本中内容的显示方式
6、HTML5版本声明：
<!DOCTYPE html>
作用：用于告知浏览器使用哪个版本的HTML或XHTML规范
位置： <!DOCTYPE html>必须放在html文档的首行，且放置于标签之前
注意： <!DOCTYPE html>不属于html标签，就是一条声明语句
7、字符集声明标签： <meta charset=”UTF-8”/>
该标签放置于 <head>标签内

<meta charset=”UTF-8”/> 【正常都是用UTF-8，国际编码】

</head>

注意：简体中文编码：<meta charset=”GB2312/GB2313”/>
8. HTML的编写方式

<!--网页呈现的内容-->
<h1>主页内容</h1>
<body>
</body><!--删了不影响  会自动添加  不严谨规范   但是title不可以省略 -->

9.HTML基本骨架

<html>
<head>
    <meta charset=”UTF-8”/>
    <title>文档标题</title>
</head>
<body>主体【页面所有可视部分】</body>
</html>

注意：html标签是head和body的父级元素，head和body标签是html标签的子元素
10、标签可以嵌套，但不允许交叉
<head><title></title></head>【标签嵌套】对
<head><title></head></title>【标签交叉】错
11、HTML标签不区分大小写：即<html>与<HTML>与<Html>并无区别
12、HTML注释一段内容时使用“"结束（Ctrl+？）
13、W3C标准包括：HTML、CSS【CSS样式】、JavaScript【脚本】
14、HTML网页中默认字体大小为：12px、14px【px像素】

常见的HTML标签及其属性

1、HTML基本语法：<标签名属性=“属性值”>内容</标签名>
2、属性的概念：用来表示标签的特征
属性值的概念：为属性赋的值被称为属性值
3、HTML标签分类：单标签、双标签
（1）单标签：<br/>、<img/>、<hr/>、<meta/>、<input/>
（2）双标签：<div></div>、<p></p>、<a></a>等
4、样式标签：【都属于行内元素】
倾斜：<i></i>
倾斜强调：<em></em>
加粗：<b></b>
强调加粗：<strong></strong>
下划线：<u></u>
5、HTML特殊符号：
空格： 【英文半角空格】
大于号：>
小于号：<
版权符号：©
双引号："
注册符号：®
连接符号&：&
6、标题标签：<h1>~<h6>【块级元素】
H1级别最高、字体最大，依次递减，h6级别最低，字体最小
7、段落标签：<p>内容</p>【块级元素】
8、图片标签：<img/>
标签属性：
（1）宽度属性：width=“数值”【不带单位，默认单位是px】
（2）高度属性：height=“数值”【不带单位，默认单位是px】
（3）图片路径属性：src=“图片路径”
（4）鼠标滑过显示提示文字属性：title=“提示文字”
（5）图片非正常显示时显示提示文字：alt=“提示文字”
注意：所有的标签都具有title属性，除了<br/>标签没有title属性
9、水平线标签：<hr/>
标签属性：
（1）宽度属性：width=“数值”
（2）颜色属性：color=“颜色名称/十六进制颜色/rgb()颜色”
1）颜色名称：red（红色）、green（绿色）、blue（蓝色）
2）十六进制颜色：#ff0000(或#f00)（红色）、#00ff00(#0f0)（绿色）
#0000ff(#00f)（蓝色）、#000000(#000)（黑色）、#ffffff(#fff)（白色）
3）rgb()颜色：值得范围是（0-255）
rgb(255,0,0)（红色）、rgb(0,255,0)（绿色）、rgb(0,0,255)（蓝色）
rgb(255,255,255)（白色）、rgb(0,0,0)（黑色）
（3）水平线粗细：size=“数值”
（4）水平对其方式：align=“left/center/right”
10、路径：相对路径、绝对路径
（1）相对路径：自己相对于目标文件的路径
Web/html/index.html
…/index.html【添加…/用于路径不在同一目录下，返回上一级】
（2）绝对路径：完整的描述文件路径，精确到盘符或服务器
例如：http://www.baidu.com【精确到服务器】
C://Web/imgs/01.jpg【精确到盘符】

元素分类、列表标签、超链接标签

1、HTML元素分类：行内元素、块级元素、行内块级元素【可变元素】
（1）行内元素（display：inline）：行内元素在同一行显示，只能包含文本或其他的行内元素
注意：默认情况下行内元素不具有宽高属性，也不具有：margin-top和margin-bottom【上下外间距】
举例：a、i、span、img、time、em、strong、label、b、textarea、input、select（img和input可以设置宽高）
（2）块级元素（display：block）：块级元素独占一行，可以包含行内元素或其他块级元素【注意：块级元素具有宽高属性】
举例：div、p、hr、ul、li、ol、dl、dt、dd、table、form、h1-h6
（3）行内块级元素（display：inline-block）：既有宽高属性，同时还有同行特性【能设置宽度，并且在同一行显示】
举例：img、input【默认情况】

<b>hello</b>
 <strong> world </strong>
 <i> 斜体字 </i>
 <em> 强调文本 </em>
 <small> 小号文本 </small>
 <big> 大写 不推荐使用 </big>
 <sub> 下标文本 </sub>
 <sup> 上标文本 </sup>
 h <sub> 2 </sub> o    水
 m <sup> 2 </sup>     m的平方
 <bdo dir="rtl"> hello 从右到左输出 </bdo>

2、无序列表标签：<ul><li>列表项</li></ul>
标签属性：type=“circle（空心圆）/square（实心方块）/disc（实心圆）【默认值】”

<ul  type=“circle”>
     <li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>

练习：
1.请选择以下正确的答案（）
A.答案1
B.答案2
C.答案3
D.答案4
2.请选择以下正确的答案（）
A.答案1
B.答案2
C.答案3
D.答案4
3.请选择以下正确的答案（）
A.答案1
B.答案2
C.答案3
D.答案4
3、有序列表标签：<ol><li>列表项</li></ol>
标签属性：type=“A（大写字母）/a（小写字母）/i（小写罗马数字）/I（大写罗马数字）/1（阿拉伯数字）【默认值】”
reversed=“reversed”：设置有序列表的倒叙显示（项目符号倒叙）
4、自定义列表标签：

<dl>、<dt>、<dd>
<dl>
<dt>自定义项</dt>
<dd>自定义描述项</dd>
<dt>自定义项</dt>
<dd>自定义描述项</dd>
</dl>

5、超链接标签：<a>内容</a>
标签属性：
（1）路径属性：href=“跳转链接的路径”
（2）打开方式属性：target=“_self/_blank/_top/_parent”
_self：当前窗口（原窗口）
_blank：新窗口打开
_top：主框架打开、_parent：父级框架打开
注意：1）超链接是一对一的关系（一次只能连接一个文件）
2）不仅仅可连接到网页，还可以连接到图片
3）超链接可以为用户提供链接下载文件
以下内容【可提前做笔记也可以明天用到后再做笔记，绿色的是今天没具体讲的明天可以用到具体讲】
2)超链接标签

<a href="链接到的目标地址">内容：文本或者图片</a>

我们可以通过绝对路径和相对路径来回跳转
绝对路径：
相对路径：

<meta http-equiv="refresh" content="7;url=http://www.sina.com.cn" />

描述：行级标签超链接标签

<a href="" target="_self/_blank"></a>
 -->
 <a href="链接到的目标地址">内容：文本或者图片  有些网站防盗链  所以不让跳转</a>
 <a href="http://www.sina.com.cn" target="_blank">新浪网</a>
 <a href="yolanda1.html">相对路径</a>
 <a href="yolanda\yolanda.html" target="_blank">绝对路径</a>
yolanda:
<body>
		绝对路径
		<a href="../index.html">index.html</a>
</body>

3）图像标签

<img src="图像资源路径" alt="提示文字"/>
<!--
 	图像标签
 -->
 <img src="img/logo.JPG" title="我的鼠标" alt="程序员专用" />
 <!--当图片不存在的时候  会提示alt后面的文字  提示缺少那张图片    title悬停文字-->
图片跳转  把图片嵌套在超链接里面
<a href="http://www.sina.com.cn" target="_blank">
 	<img src="img/logo.JPG" title="我的鼠标" alt="程序员专用" />
 </a>

菜鸟：图像标签下的map

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

rect:矩形左上0,0 右下82,126
circle圆形圆心：90,59 半径3
4）span强调凸显标签

 今天打折，只要7折起  ：凸显7折   <p>展现不了凸显
<p>今天打折，只要<span style="color: red;font-size: 36px;">7折</span>起</p>

5）<br/>换行标签：换行间距不大
<p>标签间距大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
	</head>
	<body>
		<ol>
			<li>请选择以下正确的答案（）</li>
			<ol type="A">
				<li>答案1</li>
				<li>答案2</li>
				<li>答案3</li>
				<li>答案4</li>
			</ol>
			<li>请选择以下正确的答案（）</li>
			<ol type="A">
				<li>答案1</li>
				<li>答案2</li>
				<li>答案3</li>
				<li>答案4</li>
			</ol>
			<li>请选择以下正确的答案（）</li>
			<ol type="A">
				<li>答案1</li>
				<li>答案2</li>
				<li>答案3</li>
				<li>答案4</li>
			</ol>
		</ol>
	</body>
</html>

一个世俗人

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML的介绍和常见标签及其属性

HTML的介绍1.搭建网页的结构：html5.02.对页面的页面元素进行修饰，比如定位等。表现（CSS）3.和页面的元素进行交互。行为（javascript,jQuery）4.BootStrap(前段框架)—响应式布局(1)、文件夹、文件命名规则：由英文字母、数字、下划线共同组成，数字不能开头，不能使用汉字作为文件名我们书写标签的时候尽量以严格的方式来书写:1）有结束标签的必须加结束...
复制链接

扫一扫