html的理解一

SPIRT00

已于 2022-11-26 18:30:28 修改

阅读量109

点赞数

分类专栏：前端基础学习文章标签： html 前端 css

于 2022-11-24 21:26:00 首次发布

本文链接：https://blog.csdn.net/weixin_51884452/article/details/128016692

版权

前端基础学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

一、HTML
总结

一、HTML

1.html简介

<!DOCTYPE html>//声明html文档，有助于正确的显示网页。
<html>//html页面的根元素
<head>
<meta charset="utf-8">//头元素中有网页编码的格式
<title>打不死的小强</title>//文章的标题
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>

</html>
//做渗透开发总体框架必须记牢。

2.html基础

标题标签：<h1></h1>
段落标签：<p></p>
链接标签：<a href="www.baidu.com">百度</a>
图像标签：<img src="./1.png" width="22" height="11"/>

3.html属性

html对大小写不敏感，<br/>换行。
属性是html提供的附加信息。以名称/值的形式出现。如:name=“helloword”
属性被包括在括号内，值的话单双引号均可如:<a href="baidu.com">百度</a>
属性class:为html定义了一个多类名
id:元素唯一的id
style:元素的样式

4.html标题，段落，文本格式化

<h1>定义最大标题,<h6>定义最小标题
<hr>代表水平线用来分割内容
<!--注释-->
<p></p>段落，<br>换行。
文本格式化：如下
<b>加粗字体</b>,<i>斜体</i>等

5.html链接

//链接可以是图像，字等，当你点击它们时会跳转到新的文档。
用<a>中href表示链接的地址,使用target属性可以定义被链接的文档在何处显示。
如<a href="baidu.com"  target="_blank">百度</a>,_blank另起一个页面显示，_self在当前页面显示。
_top在整个窗口中打开文件,_parent在父框架中打开文件。
<img src="baidu.com" border="0" alt="图片">其中border代表是否带边框，alt替换文本当图片不显示时出现。

链接一个到提示的部分实现

<a href="#tips">第四章</a>
<a id="tips">第四章</a>

6.html头部

在头部base指定了默认的链接地址

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>拉斐尔</title> 
<base href="https://www.baidu.com/images/" target="_blank">
</head>

<body>
<img src="logo.png" alt="无图"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.baidu.com/images/logo.png"
<br><br>
<a href="https://www.baidu.com">百度</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

<meta>描述关键字，作者，字符等，以便于别人很容易的搜索到对应内容。

<meta name="description" content="你想要的都在这">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="baidu">

1.html中的head元素
在head元素中你可以插入脚本，样式文件，各种meta信息。添加的元素标签有：

<title>,<style>,<meta>,<link>,<base>,<script>等

2.html中的link元素

定义了文档与外部之间的关系

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

3.html中的style元素定义了样式文件的引用地址。

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

4.html中的meta元素

不会显示在页面上，但会被浏览器解析。如网页描述的关键字，作者等

5.html中script元素

用于加载脚本文件js等

7.html中css

css用来渲染html元素标签的样式。

如何使用css
内联模式：在html中使用css
内部样式表：在head头部使用style元素包含css
外部引用：使用外部css文件。

1.内联样式

对于特殊的样式运用到个别元素时使用的。

以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>

html中的字体（font-family），字体颜色（color），字体大小（font-size）。


<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

html中的文本对齐方式

text-align文字对齐

<h1 style="text-align:center;">居中对齐的标题</h1>

2.内部样式
单个文件需要样式时，可以使用内部样式表。可在head中使用style内部样式。

<head>
<style type="text/css">
body{backgroud-color:yellow;}
p{color:blue;}
</style>
</head>

3.外部样式表
当样式被运用到很多页面的时候。外部样式最好。通过改变一个文件改变所有站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

8.html中图像

html中插入图像可不同服务器或链接中插入。
1.html中图像标签img和src属性。

img是空标签，只包含属性，没有闭合标签。
页面上显示图像，使用源属性src,source
alt为图像不显示时的替换文本。
为图片设置高度和宽度。height,width

2.创建图像的映像
可供点击的图像地图，每个在这里插入代码片区域都是一个超级链接。

<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>

map标签用于图像映像，指可点击某一区域。

<img>中的usemap属性可用<map>中的id或name属性。area定义map内部用于映射的区域。

总结

本文来自于菜鸟教程和自己的理解思考。