首页 > 其他分享 >HTML5语法总结大全

HTML5语法总结大全

时间:2023-11-26 21:56:44浏览次数:44  
标签:网页 下划线 符号 标签 语法 HTML 字体 HTML5 大全

参考书籍:
HTML与CSS3基础教程
参考视频:
HTML5完整教学通俗易懂
参考网站:
w3school
参考博客:
学习HTML5这一篇就够了

目录

零.开发环境准备

1.需要的工具

Vscode编译器软件:编写HTML代码,辅助代码补充

浏览器(谷歌,Microsoft Edge等):展示HTML页面

2.Vscode所需要插件

  • 汉化菜单插件:Chinese
  • 打开网页插件:open in browser
  • 自动刷新页面: live serve

3.其他辅助软件

PxCook前端设计辅助软件:放入UI美工设计的Psd文件,即可获得页面所需要的相关数据,例如间距px,颜色的RGB代码等

一.HTML基本语法

1.HTML基本骨架

  • html : 整个网页

  • head :网页头部,用来存放给浏览器看的信息,例如CSS

    • meta:描述性标签,描述网站的一些信息
    • title:网页标题
  • body : 网页主体,用来存放给用户看的信息,例如图片文字

  • 生成HTML基本骨架的快捷键:!+回车

<!-- DOCTYPE:告诉浏览器要使用的规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head代表网页头部 -->
<head>
    <!-- meta描述性标签,描述网站的一些信息 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title网页标题 -->
    <title>网页标题</title>
</head>

<!-- body代表网页主体 -->
<body>
    存放给用户看的内容
</body>
</html>

2.注释

注释添加快捷键:Ctrl+/

<!--内容-->

3.HTML语法规范

  • HTML中不区分大小写,但是我们一般都使用小写
  • HTML中的注释不能嵌套
  • HTML标签必须结构完整,要么成对出现,要么自结束标签
  • HTML标签可以嵌套,但是不能交叉嵌套
  • HTML标签中的属性必须有值,且值必须加引号(双引号单引号都可以)

4.标签规范

单标签

<标签名 [属性名=属性值,...]>

双标签

<标签名 [属性名=属性值,...]></标签名>

二.HTML网页基本标签

1.标题标签

  • 标题标签有h1~h6(双标签)
  • 显示特点:文字加粗,字号逐渐减小,独占一行(换行)
  • h1标签一般一个网页只用一次
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签

  • 段落标签:p(双标签)
  • 段落标签的特点:独占一行,段落间存在间隙

示例:

<!-- <p>段落</p> -->
    <p>两只老虎,两只老虎~</p> <p>跑得快,跑得快!</p> <p>一只没有眼睛,一只没有尾巴~</p> <p>真奇怪,真奇怪~</p>

3.换行标签

  • 换行标签:br(单标签)
  • 特点:相对于段落标签p来说,它的间隙更小

示例:

<!-- <br> -->
两只老虎,两只老虎~<br>跑得快,跑得快!<br>一只没有眼睛,一只没有尾巴<br>真奇怪,真奇怪~

4.水平线标签

  • 水平线标签:hr(单标签)
<hr>

5.文本格式化标签

用来添加文本样式,使文字展示不同的样式效果

5.1粗体标签

  • 粗体标签:strong(双标签)或b(双标签)
  • 作用:添加加粗的字体样式
<strong>加粗字体测试</strong>
<b>加粗字体测试</b>

5.2斜体标签

  • 斜体标签:em(双标签)或i(双标签)
  • 作用:添加斜体的字体样式
<em>斜体字体测试</em>
<i>斜体字体测试<i>

5.3下划线标签

  • 下划线标签:ins(双标签)或u(双标签)
  • 作用:添加下划线的字体样式
<ins>下划线字体测试</ins>
<u>下划线字体测试<u>

5.4删除线标签

  • 删除线标签:del(双标签)或s(双标签)
  • 作用:添加删除线的字体样式
<del>下划线字体测试</del>
![](/i/l/?n=23&i=blog/3305947/202311/3305947-20231126213510836-1999730110.png)

<s>下划线字体测试<s>

三.HTML的特殊符号

1.空格

在HTML代码中输入空格在页面中只会显示一个,因此使用特殊符号可以显示多个空格

空格符号:一个符号代表一个空格,多次使用可以展示多个空格

&nbsp;   

2.大于,小于符号(> , < )

大于符号(>):一个符号代表一个大于符号,多次使用可以展示多个大于符号

&gt;   

小于符号(<):一个符号代表一个小于符号,多次使用可以展示多个小于符号

&lt;   

3.版权符号

版权符号(©):一个符号代表一个版权符号,多次使用可以展示多个版权符号

&copy;   

标签:网页,下划线,符号,标签,语法,HTML,字体,HTML5,大全
From: https://www.cnblogs.com/sillyfox/p/17857870.html

相关文章

  • Python基础语法
    输入输出print():基础控制台输出将()中的内容输入到控制台(console)中直接输出字符串要使用引号包裹 print("hello,world")使用“end”来控制输出结尾(默认以\n(换行)结尾) print("hello,world",end="")#不换行结束 print("hello,world",end="*")#以*作为结尾 prin......
  • Day05 语法
    1.注释单行注释//注释多行注释/*注释*/文档注释/**注释*/2.标识符命名规则(与js规则一样)标识符可以含有字母,数字,下划线_,(*注意此处相较于c语言多出一个符)不能以数字开头不能是java中的保留字和关键字java也采用了unicode编码方式,所以......
  • SQL 中的运算符与别名:使用示例和语法详解
    SQL中的IN运算符IN运算符允许您在WHERE子句中指定多个值,它是多个OR条件的简写。示例:获取您自己的SQLServer返回所有来自'Germany'、'France'或'UK'的客户:SELECT*FROMCustomersWHERECountryIN('Germany','France','UK');语法:SELECTcolumn_name(......
  • SQL 中的运算符与别名:使用示例和语法详解
    SQL中的IN运算符IN运算符允许您在WHERE子句中指定多个值,它是多个OR条件的简写。示例:获取您自己的SQLServer返回所有来自'Germany'、'France'或'UK'的客户:SELECT*FROMCustomersWHERECountryIN('Germany','France','UK');语法:SELECTcolumn_name(......
  • lua基本语法1
    一注释单行注释 两个减号是单行注释:--注释内容多行注释--[[多行注释多行注释--]] 二)基本类型Lua中有8个基本类型分别为:nil(空)----->javanull(空)boolean(布尔)、number(数字)双精度浮点数--->javaintdoublefloatstring(字符......
  • MySQL语法
    MySQL介绍数据库(DataBase,简称DB):据库是存放数据的仓库,它的存储空间很大,可以存放百万条、千万条、上亿条数据。因此,开发中只要涉及到数据,就一定会用到数据库;数据库管理系统(DataBaseManageSystem,简称DBMS):数据库管理系统是一种操纵和管理数据库的大型软件,用于建立、使用和维......
  • 基于html5+javascript技术开发的房贷利率计算器,买房的码农们戳进来
    房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。体验地址房贷计算器体验地址关键代码<t......
  • 模板语法之句点符的深度查询
     views.py:defindex(request):num=10ss='lqzishandsome'b=Falsell=[1,2,43,{'name':'egon'}]dic={'name':'lqz','age':18}deftest():print('我是tes......
  • django模板使用的两种方式 模板语法之变量
    模板语法之变量DTL:DjangoTemplateLanguage1模板中使用{{python变量}}############views.pydefindex(request):num=10ss='lqzishandsome'b=Falsell=[1,2,43]dic={'name':'lqz','age':18}deftes......
  • SmtLib2语法
    Smt-Lib2实用语法教程本文或许仅适用于想快速上手smt脚本使用的人,其他的本文深度或许略有不足简介及配置SMT(SatisfiabilityModuloTheories),可满足性模理论,是一种自动推理领域的技术,用于判断逻辑公式在特定理论下的可满足性。SMT解决的是一种更加复杂的问题,即在一阶逻辑的基......