菜鸟基础HTML学习

最新推荐文章于 2023-09-22 22:19:06 发布

不喜欢热闹的孩子

最新推荐文章于 2023-09-22 22:19:06 发布

阅读量402

点赞数 1

分类专栏：自学前端的网工

本文链接：https://blog.csdn.net/weixin_43483442/article/details/107656869

版权

自学前端的网工专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.HTML初识

HTML概述

HTML：超文本标记语言（Hyper TextMarkup Languag，通过HTML标签对网页中的文字、图片、连接进行美化
关键词：文本、标记、语言

HTML格式

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	</head>

	<body>
	</body>
</html>

标签	意义
html	最外层的标签，所有标签都包含在html标签中
head	头部标签，包含了title标签、meta 标签、style标签等标签
title	定义标题标签，显示在网页标签上
body	"身体"标签，网页所有内容都在body标签中

标签分类：

标签都大部分都是使用<>进行包裹,有开始标签和结束标签，只有少部分标签属于单标签，不需要闭合。

标签名	举例	展示
双标签	html、body、div、p标签等	`<html></html>`
单标签	hr、br	`<br />、<hr />`

标签关系

嵌套关系

<html>
	<head>
	</head>
</html>

并行关系

<head>
</head>


<body>
</body>

文档类型<!DOCTYPE>

<!doctype html>：表示html文档类型。

meta标签

<meta charset="UTF-8">：使用UTF-8编码格式。

二.标签的语义化

标题标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五极标题</h5>
<h6>这是六级标题</h6>

段落标签

<p>这是p标签，段落标签</p>

水平线标签

<hr />

换行标签

<br />

布局、盒子模型标签

<span>行内元素</span>


<div>盒子标签</div>

文本格式化标签

标签类型	标签	推荐使用
加粗	`<b></b>`、`<strong></strong>`	推荐使用strong标签，语义更强烈
斜体	`<i></i>、<em></em>`	推荐使用em标签
删除线	`<s></s>、<del></del>`	推荐使用del标签
下划线	`<u></u>、<ins></ins>`	推荐使用ins标签

标签属性

标签属性

<p size=10px color='red'>标签属性</p>

写在开始标签内部
使用空格隔开
可以写多个属性

图像标签

<img /> ：单标签,将图像显示在网页中，image缩写。通过多个属性展示。

<img src=./images/test.jpg alt='测试' />

属性	值	意义
src	图片路径：相对路径、绝对路径、网络路径	图片存放的路径
alt	替换文本	在图片无法显示时显示的替换文字
title	鼠标悬停时显示的内容	提示信息
width	宽度	设置图片的宽度，单位px
height	高度	设置图片的高度，不建议同时修改高度和快点
boder	边框	设置边框的宽度，px

链接标签

链接标签：<a></a>
a标签是用来在网页上添加链接或者锚点。

属性	描述	例子
href	链接地址:相对路径、绝对路径、网页链接	href=“http://www.lovejoan.com”
target	_blank:新建标签页，_self:原标签页打开	默认在原标签页打开链接、_blank重新打开一个标签

锚点

通过id的值加上a标签链接实现跳转。

<h3 id="live">个人生活</h3>
<a href="#live">个人生活</a>

base标签

在<head></head>标签里面统一设置链接的打开方式

<html>
<head>
	<title>标题</title>
	<base target="_blank"/>
	<meta charset="utf-8">
</head>
<body>

</body>
	<a href="http://www.baidu.com">百度</a>

	<a href="http://www.163.com">网易</a>

</html>

特殊字符

特殊字符	值
` `	空格
`<`	<
`>`	>
`&copy`	©

注释标签

<!--这个是注释-->

文件路径

类型	描述	示例
绝对路径	从盘符开始写	`C:/Users/WZS/.packettracer`
相对路径	相对当前文件的路径	`./images/1.jpg`
网络路径	跳转网络路径	http://www.lovejoan.com

列表标签

无序列表：ul
有序列表：ol
自定义列表 dt

无序列表

<ul>
	<li>苹果</li>
	<li>香蕉</li>
	<li>橘子</li>
</ul>

无序列表前面默认有项目符号，但可以通过CSS代码去掉。需要和<ul></ul>标签搭配使用

有序列表

<ol>
	<li>西瓜</li>
	<li>哈密瓜</li>
	<li>三华李</li>
</ol>

有序列表
使用ol标签+li标签显示有顺序的列表。

自定义列表

<dl>
	<dt>测试</dt>
    	<dd>111</dd>
    	<dd>222</dd>
    <dt>测试2</dt>
   		<dd>333</dd>
</dl>

自定义列表使用dl+dt+dd的方式来显示自定义列表。多用于网页底部的友情链接。
好了，大概先到这来吧！

不喜欢热闹的孩子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
菜鸟基础HTML学习

HTML初识HTML概述：HTML：超文本标记语言（Hyper TextMarkup Language）HTML:通过HTML标签对网页中的文字、图片、连接进行美化关键词：文本、标记、语言html骨架：<html> <head> <title></title> </head> <body> </body></html>html标签是最外面
复制链接

扫一扫