html -基础标签

<!DOCTYPE html>
<!DOCTYPE这是一个版本声明 -->
<html>
    <!--网页使用的语言
    -->
    <head>
        <!--给浏览器的一些信息-->
        <meta charset="utf-8">
        <!--编码格式-->
        <title>虎哥最帅</title>
        <!--title网页的标题-->
    </head>
    <body>
        <!--body就是网页内部的内容-->
        <!--1 a标签  href:超链接-->
        <a href="http://www.baidu.com">虎哥最帅</a>
        <a href="http://www.jianshu.com">向阳最丑</a>
        <!--标签总结:标签分为两种,一种是单标签,一种是双标签,a就是双标签,meta就是单标签, 双标签是可以添加内容的,单标签不可以添加内容-->
        <!--h标签  标记标签 h1到h6-->
        <h1>0601班最棒.</h1>
        <h2>但是虎哥最帅</h2>
        <h3>向阳最丑</h3>
        <h4>吴坤最污</h4>
        <h5>小歪最好</h5>
        <h6>我是h6</h6>
        <!--h1+h2+h3+tab键-->
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <!--ul无序标签 ol有序标签-->
        <!--ul>li*3  创建3个ul标签-->
        <!--ul>li{我是无序$}*3+Tab-->
        <ul>
            <li>我是无序标签1</li>
            <li>我是无序标签2</li>
            <li>我是无序标签3</li>
            <li>我是无序标签4</li>
            <li>我是无序标签5</li>
        </ul>
        <hr />
       <ol>
            <li>我是有序标签1</li>
            <li>我是有序标签2</li>
            <br />
            <li>我是有序标签3</li>
       </ol>
       <!--br:换行标签-->
       <br />
       <!--hr:水平换行符-->
       <hr />
       <!--p:段落标签 内容单独为一行-->
      <p>胡歌最帅</p>
      <p>呆,妖精,看法宝,我给你看看我的宝贝</p>
      <!--div标签 没有语义,主要的作用用来做网页的布局,需要和css配合使用-->
      <div id="">
          我是div
      </div>
      <div id="">
          我是div2
      </div>
      <!--tab标签,表格标签,非常重要的标签-->
      <!--border:边框线的宽度,cellspacing:单元格之间的间距  cellpadding:单元格和边框线的间隔-->
      <!--tr:行数 td:单元格 th:表头单元格-->
      <table border="1" cellspacing="1" cellpadding="1">
          <tr>
              <th>表头1</th>
              <th>表头2</th>
          </tr>
          <tr>
              <td>单元格1</td>
              <td>单元格1</td>
          </tr>
          <tr>
              <td>单元格2</td>
              <td>单元格2</td>
          </tr>
      </table>
      <table border="1" cellspacing="1" cellpadding="1">
          <tr>
              <th>三月份</th>
              <th>四月份</th>
              <th>五月份</th>
              <th>六月份</th>
          </tr>
          <tr>
              <td>C</td>
              <td>OC</td>
              <td>UI</td>
              <td>高级+项目</td>
          </tr>
      </table>
      <!--img标签  src:图片网址(可以是本地的 也可以是网络的),alt:图片没有加载完成之前显示的图片  title:鼠标点击时的显示的内容提示-->
      <!--图片路径:下一级: ./  上一级: ../-->
      <img src="3.png" alt="" title="李白"/>
      <!--标签分类: 
      1.块属性 
        *块属性标签默认宽度是屏幕的宽度. 
        *块属性标签可以设置宽高 
        *块属性可以嵌套块属性标签和行属性标签.
        *属于块属性标签的有:p,div,h1-h6,ul,ol,li,table,tr,
      2.行属性
        *行数行标签在一行内显示
        *行属性标签默认内容撑开宽高.
        *行属性标签大部分不能设置宽高,除了image,input.
        *行属性嵌套,只能嵌套行属性标签.
        *属于行属性标签的有:a,img,strong,span,input,-->
        <!--form 表单标签-->
        <!--action:数据接口 method:选择请求方式,get和post  input:类型  name:相当于我们请求地址中的key值  value:服务器用到的参数-->
        <form action="http://www.baidu.com" method="get">
                用户名:<input type="text" name="userName" placeholder="请输入账号" value="" />
                密码:<input type="text" name="password" placeholder="请输入密码" value="" />
                提交<input type="button" name="" id="" value="确认信息" />
            <input type="submit" value="提交"/>
        </form>
        <!--select :下拉菜单  value 告诉后台值的-->
        <select name="sex">
            <option value="1"></option>
            <option value="0"></option>
            <option value="orz">李诵</option>
        </select>
        <br />
        <!--radio样式:单选框  name必须是一样的否则时可以进行多选的.-->
        <input type="radio" name="虎哥" id="" value="0" /><input type="radio" name="虎哥" id="" value="1" />更帅
        <input type="radio" name="虎哥" id="" value="2" />超帅
        <br />
        <!--checkbox样式:多选框-->
        <input type="checkbox" name="" id="" value="0" />小学
        <input type="checkbox" name="" id="" value="1" />初中
        <input type="checkbox" name="" id="" value="2" />高中
        <input type="checkbox" name="" id="" value="3" />大学
    </body>
</html>
原文地址:https://www.cnblogs.com/sunmair/p/5905871.html