HTML5基础语法

最新推荐文章于 2024-09-24 10:17:01 发布

吾独矣

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量445

点赞数 1

分类专栏：随笔文章标签： html

本文链接：https://blog.csdn.net/m0_56210400/article/details/121435861

版权

随笔专栏收录该内容

12 篇文章 1 订阅

订阅专栏

!doctype html标记：
用于向浏览器说明当前文档使用哪种标准规范

html标记：
标志html文档开始，/表示结束

head标记：
头部标记，封装其他位于文档头部标记，用来描述文档的标题

meta标记：
·设置网页搜索关键字

<meta name="keywords" content="关键字1,关键字2"/>
<!--name的属性值为keywords，定义搜索内容名称为网页关键字，content属性值为定义关键字的具体内容-->

·设置网页描述

<meta name="description" content="描述"/>
<!--name的属性值为description，定义搜索内容名称为网页描述，content属性值为定义描述内容-->

·设置网页作者

<meta name="author" content="作者信息"/>
<!--name的属性值为author，定义搜索内容名称为网页作者，content属性值为定义具体作者信息-->

·设置字符集

 <meta charset="utf-8">
 <!--utf-8(国际化编码)-->

·设置页面自动刷新和跳转

<meta http-equiv="refresh" content="10; url=http://www.xxx.com"/>
 <!--http-equiv属性值为refresh，content属性为特定时间数值（默认以秒为单位），url为跳转网址-->

titie标记：
网页标题标记

body标记：
主体标记，定义html文档所显示内容

标题标记：
六个等级标题，从h1到h6递减
align属性可以设置对齐方式

段落标记:
p标记，每个段落独占一行且拉开段落距离

换行标记：
br /，html中回车换行不管用

文本格式化标记：
·strong强调
·b加粗
·i倾斜
·em倾斜强调
·del删除线
·ins下划线

特殊字符标记：
·空格符&nbsp
·小于号&it
·大于号&gt
·乘号&times
·除号&divide
·等于号&amp
·人民币&yen
·注册商标&reg
·摄氏度&deg
·n次方&supn（此n为n次方）

图像标记：

<img src="图像名.图像类型"/>

·图像替换文本alt属性

<img src="图像名.图像类型" alt="文本"/>
<!--alt属性指定图像不能显示时的替代文本（如网速慢时）-->

·图像的宽度（width）和高度（height）属性
通常不给图像设置宽高属性默认原始尺寸显示，设置其中一个属性另一个会按原图等比例显示，同时设置两个属性且其比例和原始比例不一致图像就会变形或失真
·图像的边框属性border对图像进行修饰
·绝对路径：网页文件或目录文件的真正路径
·相对路径：以html文件为起点，同一文件夹直接输图像名字，上一级文件夹在文件名前加“./”，上两级加“…/…/”（以此类推），下一级文件夹输入文件夹名字加/和文件名

创建超链接：

<a href="跳转网页" target="_bank">文字描述</a>
<!--a标记用来定义超链接，href用于指定链接页，target用于指定链接页面打开方式（_self表示原窗口打开，_blank表示新窗口打开）-->

锚点链接：
方便用户快速定位到指定目标内容（比如长网页的回到顶部）

<a href="#id">文本</a>
<!--快速定位id所在位置-->

水平线标记：
hr /
size属性设置粗细
color属性设置颜色
width属性设置宽度

注释标记
！- -不会显示在浏览器中- -

单标记和双标记：
单标记用一个标题符号可完整描述某个功能，如hr /
双标记由开始和结束两个标记符组成

示范代码如下：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>HTML5基础语法</title>
    </head>

    <body>
        <h1 align="center" id="one">学无止境</h1>
        <h2 align="center">学无止境</h2>
        <h3 align="left">学无止境</h3>
        <h4 align="left">学无止境</h4>
        <h5 align="right">学无止境</h5>
        <h6 align="right">学无止境</h6>
        
        <p>学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境学无止境</p>
        <p>学无止境</p>

        <p>html中
            回车换行<br />不管用</p>
 
        <p>这里正常</p>
        <p>这里<strong>强&nbsp调</strong></p>
        <p>这里<b>加粗</b></p>
        <p>这里<i>倾斜</i></p>
        <p>这里<em>倾斜强调</em></p>
        <p>这里<del>删除线</del></p>
        <p>这里<ins>下划线</ins></p>

        <img src="ll.jpg" alt="你好呀" border="2"/>

        <br />
        <a href="http://baidu.com" target="_bank">嗨咯</a>

        <!--注释-->

        <hr align="center" size="3" color="pink" width="50%"/>
        <hr />

        <a href="#one">定位到h1格式的文本</a>

    </body>

</html>