html5标签学习笔记

最新推荐文章于 2022-06-01 22:32:41 发布

恐竹丶叶凌秋

最新推荐文章于 2022-06-01 22:32:41 发布

阅读量510

点赞数 1

文章标签： html5 学习 html

本文链接：https://blog.csdn.net/qq_22809495/article/details/123227103

版权

HTML语法规范

@双标签

@@开始标签与结束标签：

<html></html>

@单标签
@@只有一个标签：

<br />  //有一个空格

@包含关系

@@标签里嵌套标签：

<head>
<title></title>
</head>
属于父子关系

@并列关系:

<head></head>
<title></title>
属于兄弟关系

HTML基本结构标签

@HTML网页中都会有一个基本结构标签（骨架标签）

@@HTML网页也叫HTML文档

@@HTML是页面中最大的标签（根标签）：

<html></html>

@@head标签这是一个头部标签：

<head></head>

@@title的作用就是网页标题：

<title></title>

@@body标签是文档的主题部分，它包含了所有页面内容

<body></body>

@@完整格式：

<html>
    <head>
            <title>hello world</title>//标签页部分
    </head>
    <body>第一个html</body>   
            
</html>

VS CODE HTML插件篇

@Open in Browser在浏览器中打开的插件

@JS-CSS-HTML Formatter每次保存，都会自动格式化js css和html 代码的插件

@Auto Rename Tag自动重命名配对的HTML/XML标签的插件

@CSS Peek追踪至样式的插件

VS CODE写出重要的前几行代码

@!只需要一个感叹号在第一行就能跳出来选项在html文件中

@!DOCTYPE文档类声明标签,使用哪种HTML版本来显示网页

<!DOCTYPE html>
告诉浏览器使用的是HTML5版本

@《html lang=“zh-CH”》

<html lang="zh-CH">告诉浏览器这个网页使用的是什么语言

《meta charset=“UTF-8”》告诉浏览器使用的是什么字符集

<meta ccharset="UTF-8">使用UTF-8万国码字符集

HTML常用的标签

标题标签

@标题标签定义：

<h1>到<h6>一共六个级的标签
<h1><h1/>
<h2><h2/>
<h3><h3/>
<h4><h4/>
<h5><h5/>
<h6><h6/>

@@h是head的缩写

段落标签

@段落标签语法：

<p></p>

##换行标签《br /》

<br />
单标签
另起一行并非段落
打断、换行的作用

文本格式化标签

@在网页里有时候给文字加些特效
@@斜体
@@粗体
@@下划线
@@称之为文本格式化
@@@加粗标签strong或b

<strong></strong>
<b><b>

@@@斜线标签em或i

<em></em>
<i></i>

@@@删除线标签del或s

<del><del>
<s></s>

@@@下划线标签ins或u

<ins></ins>
<u></u>

div与span标签

@div与span都是盒子没有语意

@用法：

<div></div>//表示分割、分区
<span></span>//跨度、跨距

@@div的用法是用来布局用的，一行只能放置一个div，可以理解成大盒子
@@span一行可以放很多个小盒子

图像标签

@img标签使用：

<img src = "图像UCR"/>
src是必须属性，用于制定图像文件的路径和文件名

@@图片标签的其他属性：
@@@alt是替换文本。图像不能显示的文字：

<img src="abcd.jpg" alt="这是abcd"/>

@@@title是提示文本。鼠标移动到图片上就会显示文字

<img src="abcd.jpg" title="鼠标放在了abcd的图片上"/>

@@@width是设置图像的宽度

<img src="abcd.jpg" width="500"/>//图片abcd的像素高度是500

@@@height是设置图像的高度

<img src="abcd.jpg" height="100"/>//图片abcd的橡树宽度是100

@@@border是设置图像的边框粗细

<img src="abcd.jpg"border="15"/>   //加了一个15像素宽边框

@@属性使用的注意事项
@@@一个图像标签中要是用两个属性它们之间必须有一个空格：

<img src="abcd.jpg"width="500"/> //错误示范
<img src="abcd.jpg" width="500"/>  //正确示范

路径

@目录文件夹与根目录

@@目录文件夹，存放与网页相关的文件（文件目录的第一层）

@相对路径

@@以引用文件所在位置为参考基础，而建立出的目录路径

@@相对路径分类：

@@@同一级只引用图片名字和文件的格式就行没有其他符号

<img src ="abcd.png" />

@@@/下一级目录//就是根目录里面的字目录，也可以是根目录的子目录的子目录的子目录

<img src="tp/abcd.png" />

@@@…/上一级目录//就是子目录的上一级目录，有可能是根目录，也有可能是子目录

<img src="../abcd.png" />

@绝对路径

@@直接到达目标位置

@@绝对路径是电脑中的目录路径通

@@@绝对路径用\来直达：

<img src="C:\Program Files (x86)\Microsoft\Edge\Edge.png" />//就当Edge浏览器的图标文件是png格式的吧

@@@网络上的绝对地址：

<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" />

超链接标签

@超链接的作用就是从这个页面连接到另一个页面

@@超链接的标签：
《a》

<a href="http://www.bilibili.com" target="目标窗口弹出方式">文本或图像</a>

@@@超链接标签的属性

@@@@href是用于指定链接目标的url地址，(必须属性）当为标签应用href属性时，它就具有了超链接的功能

@@@@target是用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

@@@target属性的参数

@@@@_self //当前网页跳转页面

@@@@_blank //自动新建一个页面跳转到页面

@内部链接

内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可例如:

<a href="abcdtp.html">abcd图片</a >

@空链接

@@#

<a href="#">首页</a>

@下载链接

@@如果href里面地址是一个文件或者压缩包就会下载这个文件

<a href="abcd.zip">文件下载</a>

@网页里的各种元素都可以做超链接

@@文本、视频、图片、音频、表格等都可以添加超链接

锚点链接

@锚点链接就是在一个页面里某一个点击某个关键字就能跳转到当前页面的指定位置

@@锚点链接的使用符号#然后是一个名字：

<a href=“#abcd”>abcdxinxi</a>

@@给标签添加一个id属性要和href里的名字一样：

<h3 id="abcd">abcdxinxi</h3>

pre标签

@pre标签不会省略任何，pre标签里有什么就会显示什么，有空格也会现实空格换行符也不会被省略

<pre>
a www w w w w wwwwa
a                 n
  b              l
    c         m 
       d    k
          e
      z      f 
   i           g
h
w w w w w w w w w 
</pre>

textarea标签文本标签

@textarea可以在里面书写也可以在里面预输入文字包括换行符与空格
@@使用方法：

<textarea></textarea>

@@textarea的参数

@@@cols垂直能容下多少个文字

@@@cols横轴能容下多少个文字

@@@name显示文本框的名字

@@@warp当warp="off"表示该文本区域中不自动换行

@@@style可以设置文本框的背景颜色
@@@clas用于调用外部css中的设置

@@@演示：

<textarea cols=40 rows=10 name=text></textarea>
设置文本框的行数为40，列数为10。名称为text。