DAY1 HTML_htmi可莉-CSDN博客

本文链接：https://blog.csdn.net/Sheldon_2020/article/details/128555874

前端代码层次

最外层是<html><html/>,内部是<head><head/>(头部信息：字符集，名称，内容，标题等等）,<body><body/>（主体部分，展示在页面的内容）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML</title>
</head>
<body>

</body>
</html>

基础知识

<p class="hi">hello,world!</p>

    <!--h1-h5标签的使用-->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>

    <!--列表标签的使用-->
    <ul>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ul>

    <!--列表标签的使用-->
    <ol>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ol>

    <!--图片标签的使用-->
    <!--alt:src找不到图片时显示其含义-->
    <img
      width="200"
      height="130"
      src="https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF"
      alt="皮影"
    />

   <!-- 超链接属性-->
    <a href="https://www.w3school.com.cn/">W3school</a>

    <!--em标签：斜体-->
    <p>
        这是一段普通的文本  <em>这是强调的内容</em>
    </p>

    <!--strong:加粗-->
    <p>
        这是一段普通的文本  <strong>这是强调的内容</strong>
    </p>

    <!--单行文本输入框，输入中换行会被自动去掉-->
    <input type="text" >
    <br>
    <input type="text" placeholder="请填写文本信息">
    <br>
    <!--复选框可设为选中或未选中-->
    <input type="checkbox"/> first box
    <input type="checkbox"/> second box
    <br>

    <!--优化写法-->
    <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"  name="radio1"  id="radio1"/>first_radio
    </label>
    <label>
        <input type="radio" name="radio2" id="radio2"/>second_radio
    </label>

    <input type="range">
    <input type="submit">

     <!--多行文本-->
    <textarea name="story" rows="5" cols="20">
    this is a textarea
    </textarea>