HTML基础（一）

最新推荐文章于 2022-07-05 22:40:28 发布

大云汉IT教育

最新推荐文章于 2022-07-05 22:40:28 发布

阅读量1.5k

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML 超文本标记性语言用来制作网页的

HTML的基本框架

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8 / gb2312 /">
    <title></title>
  </head>
  <body>
  </body>
</html>

1、<!DOCTYPE>
<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。
HTML5可以向下兼容，所以，现在直接指定为<!DOCTYPE html>即可。

2、charset（字符编码集）
GB2312：简体中文字符集，含6763个常用汉字
BIG5：繁体中文，港澳台地区使用
GBK：含全部中文字符，是对GB2312的扩展，支持繁体字
UTF-8：支持中文和英文等，是最常用的字符集

HTML标签

HTML大量使用语义化标签
所谓语义化就是见名知意
1、排版标签
（1）标题标签 <h1> </h1>
h 即 head 的简写
有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
基本格式<h1></h1>
像<h7>这种错误的标签在展示时不起作用

（2）段落标签<p></p>
p 即 paragraph 的简写
基本格式<p>段落内容</p>
段落中的文本内容超出浏览器宽度之后会执行自动换行

（3）平线标签<hr />
hr 即 horizontal 的缩写
其作用是在页面中插入一条水平线
基本格式<hr />
这是一个自闭合标签。
（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）

（4）容器标签 <div></div> 和 <span></span>
div 即 division 的缩写，分割、区分的意思
span 即 span ，跨度、范围的意思
这俩本质上是一个容器，类似于 Android 中的ViewGroup
基本格式

 <div>这是div标签中的内容</div>
    <span>这是span标签中的内容</span>

2、文本格式化标签
标签效果
<b></b>、<strong></strong> 加粗，XHTML推荐使用<strong>
<i></i>、<em></em> 斜体，XHTML推荐使用<em>
<s></s>、<del></del> 删除线，XHTML推荐使用<del>
<u></u>、<ins></ins> 下划线，XHTML推荐使用<ins>

3、标签的属性
基本格式：<标签名属性1=”属性值1“ 属性2=”属性值2“></标签名>
标签可以拥有多个属性
属性必须写在开始标签中，位于标签名后面
属性之间不区分顺序
标签名与属性、属性与属性之间使用空格隔开
任何属性都有默认值，省略该属性表示使用默认值

4、图像标签 <img />
img 即 image 的缩写
基本格式<img src="图片URI/URL" />
<img />常用属性如下：
在这里插入图片描述
设置图像的宽高时，如果想等比缩放，则只设置其中一个即可

5、超链接标签
(1)超链接标签<a></a>
anchor 的缩写
基本格式 < a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</ a>
href 即 HyperText Reference , 指定要跳转的URL地址
target 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开
注意：
外链需要添加 http:// 或 https:// 前缀
内部链接直接链接内部页面名称即可，如 <a href="index.html">首页</a>
如果当时没有确定链接目标时，可以为 href 赋值为 “#” ,即 href="#",表示一个空连接
各种网页元素，如文本、图像、表格、音频、视频等都可以作为超链接的载体

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育</title>
	</head>
	<body>
   		<a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">大云汉IT</a>
    	<br/>
    	<a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
    	<br/>
    	<a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>
    	<br/>
    	<a href="#">空的超链接</a>
	</body>
</html>

（2）锚点
通过创建锚点，可以快速定位到目标内容区域
创建锚点分为两步为目标内容（即锚点）创建id 并赋值
将超链接文本与锚点的id 关联，< a href="#id名称"> 超链接文本 </ a>

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育</title>
	</head>
	<body>
    	<a href="#createAnchor">点击跳转到锚点位置</a>
    	<br/>
    		通过创建锚点，
    		可以快速定位到目标内容区域
    		<!--加这一堆br是为了增加页面高度，不然显示不出锚点效果-->
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br>
    		<h3 id="createAnchor">创建锚点分为两步</h3>
    		<hr/>
        	为目标内容（即锚点）创建id 并赋值
    		<br/>
        	将超链接文本与锚点的id 关联，&lt;a href="#id名称"&gt; 超链接文本 &lt;/a&gt;
 	</body>
</html>

6、<base> 标签
<base> 标签可以限定同一页面内所有超链接的打开方式。<base target="_blank">
设置 <base> 之后依旧可以为某个单独的超链接设置打开方式。

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育</title>
    	<!--指定页面中所有超链接的默认打开方式为 blank -->
    	<base target="_blank">
	</head>
	<body>
    	<a href="https://www.jianshu.com/u/414acf7abc2b" >大云汉IT</a>
    	<br/>
    	<!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->
    	<a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>
    	<br/>
    	<a href="aTag.html">内部链接--再打开一个aTag.html</a>
    	<br/>
   	 	<a href="#">空的超链接</a>
 	</body>
</html>

<img /> 、 < br/>、 <hr />、<base/> 都是自闭合标签
7、转义字符
在这里插入图片描述
8、注释标签
格式为 < !-- 注释内容 -- >

9、路径
（1）相对路径
图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/>
图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/>
图像文件位于HTML文件的上一级，在文件名之前加 " …/ ", 上两级则使用 " …/…/ ",依次类推。<img src="../image/logo.gif"/>
(2）绝对路径
本地绝对路径： D:\web\img\logo.gif
网络绝对路径：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

10、列表标签
（1）无序列表 <ul>
所谓无序列表就是以小圆点或者小方块作为行首标志的列表
无序列表的各项之间是并列的，没有顺序级别的区分

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育</title>
    </head>
  <body>
    	<ul>
        	<li>大云汉IT</li>
        	<li>大云汉IT</li>
        	<li>大云汉IT</li>
        	<li>大云汉IT</li>
    	</ul>
	</body>
</html>

注意：<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器，可以嵌套任意标签

（2）有序列表 <ol></ol>
内部也是嵌套<li></li>
默认以 1、2、3…作为行首排序标志

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育</title>
	</head>
	<body>
    	<ol >
        	<li>大云汉IT</li>
        	<li>大云汉IT</li>
        	<li>有序列表3</li>
        	<li>有序列表4</li>
   	 	</ol>
 	</body>
</html>

（3）自定义列表 <dl></dl>
<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>
自定义列表项前不具有任何项目符号，既没有小圆点也没有1234

<!DOCTYPE html>
<html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>自定义列表</title>
  	</head>
 	<body>
    	<dl>
        	<dt>自定义列表项1</dt>
            	<dd>自定义列表项1 的内容解释1</dd>
            	<dd>自定义列表项1 的内容解释2</dd>
        	<dt>自定义列表项2</dt>
            	<dd>自定义列表项2 的内容解释1</dd>
            	<dd>自定义列表项2 的内容解释2</dd>
    	</dl>
	</body>
</html>

效果图如下：
在这里插入图片描述

大云汉IT教育

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础（一）

HTML 超文本标记性语言用来制作网页的HTML的基本框架<html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8 / gb2312 /"> <title></title> </head> ...
复制链接

扫一扫