HTML基础语法+常用元素

最新推荐文章于 2024-10-05 09:05:35 发布

勇敢小阵

最新推荐文章于 2024-10-05 09:05:35 发布

阅读量319

点赞数 1

分类专栏： HTML学习记录文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_45654590/article/details/119332405

版权

HTML学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML基础语法、常用元素

基础知识
HTML文档

基础知识

什么是HTLM?

答：超文本标记语言
超文本: 通过超链接，页面内显示的内容除了文本，还有图片、链接、音乐、视频等非文字元素。
标记语言：（非编程语言）与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。

什么是HTLM5?

HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。

开发环境

vi、vim、记事本、VS Code、Sublime（安装插件困难）、Chrome\Firefox
VS Code优点：微软开发；支持多系统；开源；内置了扩展程序的管理功能；使用方便；可以汉化

HTML文档

基本结构

//输入!后回车——> HTML基本文档
<!DOCTYPE html> 
//文档类型为html
//html根元素，用来包含html文档的所有元素
<head>
//头部 包含在head里的内容不会显示在网页上，这里面通常放配置信息，包含编码，作者，页面描述信息，js、css的导入等。
    <meta charset="UTF-8">
//编码方式 用utf-8解析
//浏览器的标签，不显示在网页中
</head>
<body>
//是html文档的内容区,显示在网页中的内容
    hello world!
</body>
</html>

元素简介

<body>
    <div>hello world</div>
//div为块级元素（独占一行空间，用来布局段落、列表、导航菜单等）,不要把块级元素嵌套到行内元素里 
//行内元素
    <p>第一段hello world.<strong>hello world</strong> 

//空元素（单标签)
        <br/>
//简单的换行符 建议加关闭符 如上标签
//以上两个就为空元素（没有内容的元素，是在开始标签中结束的）

//替代元素（将文件引入文档，并用自身位置来替换）
        <img src="图片文件\手机.png" alt="图片不见了"/>
//src：图片的地址（必填项） alt：规定图像的替代文本，当图像不显示时，将显示该属性值内容

//html属性一般在开始标签里，属性由键值对组成 属性之间用空格隔开
        <div id="myDiv" class="myDivClass"></div>
//id：唯一标识
//class：表示当前元素是某一类的元素
//style：为 HTML 文档定义样式信息

        第二段99<sub>2</sub></p>
//下标
</body>

常用元素

div标签

// 无意义的块级元素 可嵌套div
<div>
        <div>使用了div标签</div>

p标签

//浏览器会在p标签前后自动添加空行，div不会
<p>使用了p标签</p>

h1-h6标题

//h1-h6一级标题到六级标题
        <h1>1级标题</h1>
        <h2>2级标题</h2>
        <h3>3级标题</h3>
        <h4>4级标题</h4>
        <h5>5级标题</h5>
        <h6>6级标题</h6>
//浏览器会自动在标题前后添加空行 一般结合hr使用

在这里插入图片描述
斜体文本

<i>斜体字展示</i>

粗体文本

<b>粗体字展示</b>

自定义列表

// 自定义列表
    <dl>
        <dt>首先：</dt>
        <dt>其次：</dt>
        <dt>最后：</dt>
    </dl>

在这里插入图片描述
有序列表

//使用ol>li快速输入
//摁住ctrl摁回车可以直接切换下一行
        <font size="3"color=#87CEFA>数字顺序：</font>
        <ol>
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
        </ol>
        <font size="3"color=#87CEFA>大写字母顺序：</font>
        <ol type="A">
//type默认为阿拉伯数字，还可选择其他值进行排序（A a I i）
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
        </ol>
        <font size="3"color=#87CEFA>从4开始的顺序：</font>
        <ol start="4">
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
        </ol>
//序号默认从1开始，可通过start属性改变起始值
        <font size="3"color=#87CEFA>从4开始的倒序：</font>
        <ol start="4" reversed>
//reversed为单值属性，规定列表顺序为降序 
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
        </ol>

在这里插入图片描述
无序列表

//标题是圆形符号，没有顺序
        <ul>
//使用ul>li可快速输入
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
        </ul>

在这里插入图片描述

超链接

//超链接-A标签
        <a href="https://baidu.com" target="_blank">百度一下</a>
//href属性：跳转到目的地
//target属性：默认值_self:在该窗口打开 _blank：在新窗口打开
        <a href="mailto:2457878601@qq.com" target="_blank">联系我吧</a>
// 绑定目标与元素的id值 实现锚点跳转
      <a href="#header">返回顶部</a>

插入图片
由于我对引入图片的地址理解不准确，因此在这引入文章来更好地理解：
https://blog.csdn.net/Lincain/article/details/81264035

<img src="图片文件\手机.png" alt="图片不见了"/>
//src：图片的地址（必填项） 
//alt：规定图像的替代文本，当图像不显示时，将显示该属性值内容

实体
在HTML中，某些字符是预留的。如不能使用小于号（<）和大于号(>)，这是因为浏览器会误认为它们是标签，如果希望正确地显示预留字符，我们必须在HTML源码中使用字符实体(character entities)

      1. 空格 &nbsp;
      2. <   &lt;
      3. >   &gt;
      4. "    &quot;
      5. '    &apos;
      6. &    &amp;

–2021.8.2

勇敢小阵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录