前端——HTML标签

最新推荐文章于 2024-05-07 18:30:56 发布

Bright Di

最新推荐文章于 2024-05-07 18:30:56 发布

阅读量735

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/jmaluckyguy/article/details/123340011

版权

标签的基础语法

1.HTML 标签是由尖括号包围的关键词，例如。
2. HTML 标签通常是成对出现的，例如和我们称为双标签。
3. 有些特殊的标签必须是单个标签（极少情况），例如 br换行符，我们称为单标签。
4. 标签关系：包含关系和并列关系

！+ Tab

vscode快捷键，用来创建第一个静态网页：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vscode的第一个页面</title>
</head>

<body>
    这是网页的主体
</body>

</html>

html：HTML标签：页面中最大的标签——根标签
html：HTML标签：页面中最大的标签——根标签
head：文档的头部
title：文档的标题：在head中必须要设置的标签是title
body：文档的主体：页面的内容都会放到body中
!DOCTYPE html：不是一个HTML标签，是文档类型声明，位于文档最前面的位置。作用就是告诉浏览器使用哪种HTML版本来显示网页。当前页采取的是HTML5版本来显示网页。
html lang="zh-CN"用于定义当前文档显示的语言：
en定义语言为英文
ah-CN定义语言为中文
charset：是meta标签中的属性，用来规定HTML文档应该使用哪种字符编码。其中UTF-8是万国码，基本包含了全世界所有国家都用到的字符。

常用标签

标题标签：一个标题独占一行

    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

段落和换行标签：
文本在段落标签内会根据浏览器页面的大小自动换行，段落和段落之间有空隙。
强制换行符：（单标签）

<br/>

语义标签

语义	标签	说明
加粗	双标签strong或者双标签b	strong的语义更强烈
倾斜	双标签em或者双标签i	em的语义更强烈
删除线	双标签del或者双标签s	del的语义更强烈
下划线	双标签ins或者u	ins的语义更强烈

双标签div用来做布局，一行只能放一个——大盒子
双标签span用来做布局，一行可以放多个——小盒子
图像标签：<img>用来定义HTML页面中的图像，src用于指定图像文件的路径和文件名。

    <h4> 图像标签的使用:</h4>
    <img src="img.jpg" />

    <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="img1.jpg" alt="替换文本" />

    <h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
    <img src="img.jpg" title="鼠标指到的图片显示内容" alt="替换内容" />

    <h4> width 给图像设定宽度:</h4>
    <img src="img.jpg" alt="替换内容" title="鼠标指到的图片显示内容" width="500" />

    <h4> height 给图像设定高度:</h4>
    <img src="img.jpg" alt="替换内容" title="鼠标指到的图片显示内容" height="100" />

    <h4> border 给图像设定边框:</h4>
    <img src="img.jpg" alt="替换内容" title="鼠标指到的图片显示内容" width="500" border="15" />

图像标签：
|属性 |解释|
|–|--|
|src |必须属性：用于指定图像文件的路径和文件名|
|alt|替换文本：当图片不能显示的时候，显示替换文字|
|title|提示文本：鼠标放到图片上时，显示的文字|
|width|设置图片的宽度|
height|设置图片的高度|
|border|设置图片边框的粗细|
图像标签属性的特点：
属性 = “属性值” 的方式、不分前后顺序、以空格分开。

绝对路径和相对路径

相对路径：

同级路径
下级路径	/
上级路径	…/

2.绝对路径：
C:\softsare\img\picture.gif

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性
herf	指定目标连接的URL地址，必须属性：当标签应用和herf标签时，就有了超链接的功能
target	用于指定目标链接的打开方式：_self为默认值：当前窗口打开页面，_blank为在新窗口中打开

	<h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    <a href="http://www.itcast.cn" target="_selfk">传智播客</a>
    
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
    
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>