百度前端实战训练营笔记 html基础

最新推荐文章于 2024-08-04 19:29:42 发布

辞初

最新推荐文章于 2024-08-04 19:29:42 发布

阅读量456

点赞数

分类专栏：百度前端实战训练营文章标签：前端百度 html

本文链接：https://blog.csdn.net/cichu77/article/details/128561693

版权

百度前端实战训练营专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html基础

<!DOCTYPE html><!--不是html标签，而是文档使用的规范 这里是html5规范-->
<html lang="en">
<head><!--包含了字符集，标题，关键字信息，内联样式-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>开始学习html标签吧</title>
</head>
<body>
    <p class="hi">hello world!</p>
    <!--h1-h6标签的使用-->
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
    <!--列表标签的使用-->
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <!--列表标签的使用-->
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <!--图片标签的使用-->
    <img width="100" height="130" src="http://b.bdstatic.com/searchbox/icms/searchbox/img/san_logo.png" alt="san logo">
    <!--图片资源无法成功加载-->
    <img src="http://b.bdstatic.com/searchbox/icms/searchbox/img/san_logo1.png" alt="san logo"><!--图片碎裂是显示alt信息-->
    <!--超链接属性-->
    <a href="http://www.w3school.com.cn">W3School</a><!--可跳转页面-->
    <!--其包含的内容被认定为越需要着重阅读，一般用斜体-->
    <p>
        这是一段普通的文本<em>这是强调的内容</em><!--em斜体标签-->
    </p>
    <!--表示文本十分重要，用粗体表示-->
    <p>
        这是一段普通的文本<stroong>这是强调的内容</strong><!--strong粗体标签-->
    </p>
    <!--默认值，单行的文本区域，输入中的换行会被自动去除-->
    <input type="text" />
    <br>
    <input type="text" placeholder="请填写文本信息" /><!--placeholder用于提示用户-->
    <br>
    <!--复选框，可设为选中或未选中-->
    <input type="checkbox"/>first checkbox
    <input type="checkbox"/>second checkbox
    <!--复选框的优化写法--><!--用label标签后就可以点击文字选中复选框,单选框-->
    <label><input type="checkbox" id="cbox1-pro" value="first_checkbox">first_checkbox</label>
    <label><input type="checkbox" id="cbox2-pro" value="second_checkbox">second_checkbox</label>
    <br>
    <!--让用户选择文件的控件-->
    <input type="file" />
    <br>
    <!--单选框-->
    <label><input type="radio" />first radio</label>
    <input type="radio" />second radio
    <!--进度条拖动的控件，控制范围-->
    <input type="range" />
    <!--提交-->
    <input type="submit" />
    <!--多行纯文本的编辑控件-->
    <!--cols表示文本域的可视宽度，rows表示元素的输入文本的行数(显示高度)-->
    <textarea name="story" id="" cols="20" rows="5">this is a textarea</textarea>
    <!--语义化实例-->
</body>
</html>

页面效果

在这里插入图片描述

语义化实例

通过语义化便于阅读，提升可读性，可访问性
利于搜索引擎SEO,搜索引擎去识别标签，为标签确定权重，然后搜索引擎的爬虫爬取语义化标签

<!--如使用<kbd>标签就可以不看页面，只看代码便知道这部分是键盘元素-->
<!--使用<pre>嵌套<code>标签可以知道这部分属于代码段标签-->

在这里插入图片描述

辞初

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端实战训练营笔记 html基础

百度前端训练营笔记 html基础
复制链接

扫一扫

专栏目录