2023百度前端训练营Day 2 --- HTML基础（大佬勿入...）

最新推荐文章于 2024-06-17 09:39:50 发布

蒙圈的小白菜

最新推荐文章于 2024-06-17 09:39:50 发布

阅读量129

点赞数 1

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

本文链接：https://blog.csdn.net/m0_67774221/article/details/128571364

版权

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

6 篇文章 0 订阅

订阅专栏

HIML-
<!DOCTYPE html>  <!--并不是html标签，它指的是这个文档使用的是哪一种规范，这里是使用的是HTML5的规范-->
<html>
  <head>
    <meta charset="utf-8" />     <!-- 字符集-->
    <title>开始学习HTML标签吧</title>   <1-- html文档的标题 --> 
    <mata name="keywords" content="html,css,tutorial" />
    <stytle>
      .hi{
        color: red;   <1-- 由head标签包裹的内容是不会显示在浏览器上的-->
       }
    </stytle>
  </head>
  <body>

    <p class="hi">hello world!</p>  <!-- 设置了一个hello world的段落同时给他设置了一个名字为hi的类属性。-->   

  </body>      <!-- 实际显示在浏览器上的内容由body标签包裹 -->

<!-- h1-h5标签的使用 -->
<h1>我是一级标题，最大的字号并加粗</h1>
<h2>我是二级标题</h2>
~
~
~
<h6>我是六级标题,最小的那个字号</h6>

<!-- 列表标签的使用（是一个嵌套标签：有一个默认符号在最前面有一个符号表示是一列） -->
<ul>
  <li>无序列表</li>
  <li>无序列表</li>
  <li>无序列表</li>
</ul>

<ol>    <!-- 有序列表：前面有一个数字表示它的顺序 -->
  <li>有序列表</li>
  <li>有序列表</li>
  <li>有序列表</li>
</ol>

<!-- 图片标签 -->
<img
  width="100"   宽度
  height="130"  高度
  src="https://b.bdstatic.com/searchbox/icms/searchbox/img/san_logo.png"  图片的链接
  alt="san logo"   对图片的文字描述（当图片无法正常显示的时候就会显示在旁边）
/>

<!-- 超链接标签 -->
<a herf="http://www.W3School.com.cn">W3School</a>   <!-- 使用a标签，把网站地址赋给herf这个属性,下划线是a标签的默认样式 -->

<!-- p标签包裹文本并且可以使用其他的标签进行处理 -->
<p>
    这是一段普通的文本<em>这是强调的内容</em>    em标签处理后是斜体，而strong标签处理后为粗体
</p>

<!-- 表单标签，默认值。单行的文本区域，输入中的换行会被自动去除。（就是一个输入框）-->
<input type="text" />   

<!-- 用br标签包裹并使用placeholder属性，把希望显示在文本框当中的提示文本赋给这个属性，就可以实现在文本框当中显示提示信息，当输入信息的时候，文本框中的提示信息就会消除。-->
<br>
<input type="text" placeholder="请填写文本信息" />
<br>

<!-- checkbox是复选框，可设为选中或未选中 -->
<br>
<input type="checkbox"/>first checkbox         first checkbox为复选框后面的信息
 <input type="checkbox"/>second checkbox
<br>

<!-- 让用户选择文件的控件 -->
<br>
<input type="file" />
<br>

<!-- 把type的值设为radio，则变成一个单选框 -->
<label>
  <input type="radio" id="radio"/>
  first radio
</lable>

另外，如果type的值是range的话，那它就是一个控制范围的标签；如果type的值是range的话，那它就是一个进度条拖动的控件；如果type的值是submit的话，那它就是一个提交的按钮。

像上面的复选框有个交互上的弊端，一定要点击方框才能勾选。对此可以给出以下优化写法：

<!-- 优化写法，这样点方框的文字描述也能勾选上 -->
<label>
   <input
    type="checkbox"
    id="cboxl-pro"
    value="first_checkbox"
  />first_checkbox</label>

<label>
   <input
    type="checkbox"
    id="cbox2-pro"
    value="second_checkbox"
  />first_checkbox</label>

<!-- 多行纯文本编辑控件，可在里面输入多行文字 -->
<!-- cols表示文本域的可视宽度，rows表示元素的输入文本行数（显示的高度） -->

<textarea name="story" rows="5" cols="20">
        this is a textarea
</textarea>

在HTML当中，有一个重要的概念叫‘语义化’，简单来说就是写html网站的时候，要选择合乎语义的标签，便于开发者阅读。可以保证我们写出优雅的代码同时，让浏览器的爬虫和辅助技术更好的解析。

·在html中提供了一个专门用来表示键盘元素的标签，就是<kbd>标签。我们一般也会使用<pre>标签嵌套<code>标签来表示当前这一部分是一个代码段

·同时，在html5当中，也给我们提供了非常多的语义化标签。

<header>

        <h1>观鸟网</h1>

        <img src="图片链接” alt=图片的描述文字 />

        <nav>                    

         <ul>

              <li><span>主页</span></li>

                  <li><a> herf="#">开始</a><li>

                  <li><a> herf="#">图片</a><li>

                  <li><a> herf="#">设备</a><li>

                  <li><a> herf="#">论坛</a><li>

             </ul>

        </nav>