htm5——html基础知识-文件-特点-快捷方法-常用标签-实体-超链接及使用

《独自往前》

已于 2023-09-12 15:06:20 修改

阅读量72

点赞数

分类专栏： Web前端文章标签：前端 html5

于 2023-06-19 18:51:24 首次发布

本文链接：https://blog.csdn.net/Singe_lq/article/details/131287128

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html文件

<!-- 声明文档==》html文件
    注意：在有效代码的第一行 -->
<!DOCTYPE html>
<!-- html的基本结构 -->
<!-- 标签的写法：<标签名> -->
<!-- 根标签 包含html文件的内容 -->
<html>
    <!-- 头部：储存元数据，辅助浏览器解析html文件内容 -->
    <head>
        <!-- 解决乱码问题   charset设置字符集 -->
        <meta charset="UTF-8">
        <!-- 设置网页标题 -->
        <title>网页标题</title>
        <!-- 设置网页标题的小图标 注意rel(数据类型)设置icon(小图标) -->
        <link rel="icon" href="./4.png">
        <!-- meta:设置元数据
            name:设置数据类型
                可选值：
                    keyword：设置关键字，方便搜索引擎收录页面
                    description：设置介绍网站的主要内容
            content:数据内容 -->
        <meta name="keywords" content="关键字1,关键字2,关键字3,关键字4">
        <meta name="description" content="设置介绍网站的主要内容">
        <!-- http-equiv:设置数据类型
                    refresh:更新
                content("时间;url=跳转网页地址") -->
        <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
        <!-- 当IE浏览器运行html文件时，使用最高级别的IE来渲染 -->
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <!-- 设置理想视口，运用到移动端 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <!-- 主体：页面内容，给用户看的 -->
    <body>

    </body>
</html>

html是什么？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言:HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签(markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML标签及文本内容

HTML文档也叫做web 页面

html的特点

1.标签名不区分大小写，但是默认小写

2.引入网页内容的标签一定写在body内

3.一个heml文件有且只有html，head，dody，title

html的常用快捷方式

1.快捷生成基本结构 shift+！+enter/tab 在英文输入状态下

2.快捷生成和取消注释 crtl+/

3.快捷生成英文单词 lorem+num 随机生成num个英文单词

4.快捷复制上一行 shift+alt+向上/向下键

5.快捷生成中午字符 jw+num

6.快捷选中每行相同位置 shift+alt+鼠标左键

7.快捷选中不相同位置 alt+鼠标左键

8.快速格式化文档 shift+alt+F

常用标签

标题标签h1-6 常用h1-3，一个html文件中最多只能有一个h1，独占一行

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <!-- ...... -->
    <h6>六级标题</h3>

p：段落标签，独占一行

包裹文本 span 不独占一行

        <p>使韩国，<span>投母</span>嗣在人本若，啊融子，公得看。</p>

强调:

1.内容:em 不独占一行,默认字体样式为倾斜

2.语气:strong 不独占一行,默认字体样式为加粗

        <p>
            放假时间：周四周五，端午放假
            <em>周六周六正常休息</em>
        </p>
        <p id="first">
            今天天气
            <strong>真好!</strong>
        </p>

i标签斜体不独占一行

b标签加粗不独占一行

        <i>我是i标签</i>
        <b>我是b标签</b>

        <center><del>语义删除线</del></center>

        <hr>

        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br>
            Voluptatum placeat earum doloremque, <br>
            illo tempora autem iusto eligendi ab consequatur quis!
        </p>

        <pre>
而召我下的病今头，
            胜足反惊卅，世馆畴见。
        </pre>

实体

<!--

为什么？有些符号有特殊意义或键盘中不存在

< <

> >

-->

<!--

空格：浏览器会空白解析,多个空格会解析为一个空格

&emsp; 当前字体大小的空格

&ensp; 当前字体大小一半的空格

-->

    <当时>
    <!-- <Lorem> -->
    &lt;lorem&gt; 
    ©
    &copy;
    <p>才别三无杨，&nbsp;宋后身。</p>
    <p>才别三无杨，&emsp;宋后身。</p>
    <p>才别三无杨，&nbsp;宋后身。</p>

超链接

<!--

是什么？

标签名 a

属性：

href: 设置跳转的地址

绝对路径：与当前文件（超链接书写的文件）位置无关

比如：网址从C盘开始

相对路径：与当前文件（超链接书写的文件）位置有关

./代表同一目录

../代表上个目录

taget：设置新页面显示位置

_blank 在新的窗口显示

_self 在当前窗口显示

title：设置鼠标悬停时的提示

-->

     <!-- 绝对路径 -->
     <a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
     <a href="D:\正式课\第一天 基础知识\05实体.html">点击跳转到实体</a>
     <!-- 相对路径 -->
     <a href="./05实体.html" target="_self">实体</a>
     <a href="05实体.html">实体取消</a>
     <!-- 错误写法 -->
     <a href="/05实体.html">实体</a>
     <!-- 上级目录 -->
     <a href="../第一天 基础知识/标题图标.png" title="图片">点击不在同一目录下</a>

超链接的使用

<!--

使用场景：

1.跳转到其他页面 href="其他地址"

2.回到顶部 href="#"

3.跳转到特定位置 href="#id" id:跳转到的标签的id值

4.跳转到其他页面的特定位置（1+3）href="页面地址#id" 页面地址：特定位置所在的页面地址

5.点击跳转到邮箱 href="mailto:邮箱地址"

-->

<!--

点击空链接会刷新页面==》占位符

1.# 不会刷新页面，但是会回到顶部

2.javaScript:; 不会刷新页面和回到顶部=

-->

<body>
    <!-- 跳转到其他页面的特定位置 -->
    <a href="./04常用标签.html#first">点击跳转到常用标签的p标签处</a>
    <!-- 跳转到本页面的特定位置 -->
    <a href="#first">跳转到h2标签</a>
    <!-- 跳转到其他页面 -->
    <a href="https://www.baidu.com">跳转页面</a>
    <!-- 跳转到邮箱 -->
    <a href="mailto:2417541863@qq.com">跳转邮箱</a>
    <p>lorem100</p>
    <h2 id="first">跳转到这里</h2>
    <p>lorem100</p>
    <p>jw100</p>
    <!-- 回到顶部 -->
    <a href="#">回到顶部</a>
    <!-- 空链接会刷新页面 -->
    <a href="">空地址a</a>
    <a href="#">#占位符</a>
    <a href="javaScript:;">JavaScript:;占位符</a>
</body>