html基础标签学习

基础标签

1. h 标题标签

h1-6:标题标签
   独占一行
   字体加粗
    数字越小重要程度越高

      <h1>标题1</h1>
       <h2>标题2</h2>
       <h3>标题3</h3>
       <h4>标题4</h4>
       <h5>标题5</h5>
       <h6>标题6</h6>

2. img:图片标签

img:图片标签，不会独占一行
     scr:加载图片的路劲，相对路劲和绝对路径
     title：鼠标悬停在图片上时，会做提示
     alt：图片加载失败的文字提示
      

<img src = 'img/1.jpg' width="400" height="200" title="这是一张图片" alt="加载图片" />
<img src = 'img/1.jpg' width="400" height="200" title="这是一张图片" alt="加载图片" />

3.  p: 段落标签

p:段落标签
   独占一行      

<p>段落1</p>
<p>段落2</p>

4. a:链接标签

a:链接标签 ，不对独占一行
            href:加载要访问的路径，可以是域名，也可以是文件路径
            target:表示以哪种方式打开新页面，

                _self在当前窗口打开新页面(默认值)

               _blank在新窗口 打开新页面
 

  <a href="http://baidu.com" target="_blank">百度</a>
  <a href="http://sina.com" target="_blank">新浪</a>

5.锚点

href="#bottom" 跳转到底部 
href="#" 跳转到顶部        

        <a href="#bottom">跳转到底部</a>
        <a href="#p11">跳转到11</a>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p id="p11">11</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p id="p11">11</p>
        <a  id="bottom" href="#">跳转到顶部</a>

6.列表

ol:有序列表
          type：1数字编号(默认值) A大写英文字母 a小写英文字母  I大写罗马字母 i小写罗马字母
          start:编号从哪个位置开始
ul:无序列表
          type:disc实心圆圈 circle空心圆圈 square 空心方块
         ol和ul都会独占一行
 

        <ol type="I" start="2">
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>

        </ol>
        
        <ul type="circle">
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>

7.div盒子

div:容器元素
        经常与css结合使用，用于对网页布局
        独占一行

<div style="width: 200px;height: 100px;border: 1px solid red;
font-size: 20px;color: aliceblue;">这是一段文字</div>

8.table表格

table:表格
           thead：表头标签对
            tr:表格的行
            th:表格的表头列
            td:表格的列
            border：设置表格的边框
            width height：表格宽高
            cellspacing:表格控件，设置为0可以取消边框之间间隙
            cellpadding:设置单元格的内填充空间
            align:对齐方式 left center right
            rowspan:行合并
            colspan:列合并

<table border="1" width='600' cellspacing='0' cellpadding='10' >
            <thead align="center">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
            </thead>

            <tbody align="center">
                <tr>
                    <td>java</td>
                    <td>10</td>
                    <td>10</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>python</td>
                    <td rowspan="2">15</td>
                    <td>30</td>
                    <td>600</td>
                </tr>
                <tr>
                    <td>c++</td>
                    <td>20</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="3">1000</td>
                </tr>
            </tbody>
        </table>

9.form表单

 form:表单标签
           action:表单要提交到那个页面
           method:以什么方式提交 get post
        input:文本输入框
           name:名称属性，form表单默认根据该属性获取文本框内的value值
           placeholder:文本框提示
           type:text普通文本框 password密码框 radio单选框 CheckBox复选框 submit提交按钮
        select:下拉列表框
           option:列表框选项
        textarea：文本域
           rows:行
           cols:列
        button：普通按钮

 <form action="#" method="POST">
            账号:<input type="text" name="userName"  placeholder="请输入账号"/><br />
            密码:<input type="password" name="pwd" placeholder="请输入密码"/><br />
            性别:<input type="radio" name="sex" value="male" />男
                 <input type="radio" name="sex" value="female" />女<br />
            爱好:<input  type="checkbox" name="hobby" value="basketball"/>篮球
                 <input  type="checkbox" name="hobby" value="football"/>足球<br />
            星座:<select name="star">
                
                   <option value="1">白羊座</option>
                   <option value="2">巨蟹座</option>
                   <option value="2">狮子座</option>
                   <option value="4">处女座</option>
                 </select><br />
            备注:<textarea name="remark" rows="5" cols="20"></textarea><br />
            <input type="submit"/>
            <button id="btn" onclick="function">注册</button>
 </form>

10.文字属性以及比较标签

        sapn:不能直接设置宽高，不会独占一行
         br:换行标签
         hr:水平分割线，独占一行
         b:字体加粗
         strong：字体加粗，语气强调
         i:斜体
         em:斜体，语气强调
         u:下划线
         sup:上标
         sub:下标
          :空格
         &gt:大于
         &lt:小于
         &ag:大于等于
         &le:小于等于
         ®:注册商标
         ©:版权
     

   <span>文字1</span><br />
        <span>文字2</span>
        <hr />
        <span>文字3</span><br />
        1111111<b>22</b><i>33</i><u>444</u><br />
        1111111<strong>22</strong><em>33</em><u>444</u><br />
        4<sup>2</sup>h<sub>2</sub>o<br />
        这是一段&nbsp;&nbsp;&nbsp;文字<br />
        a&lt;b&gt;c
        a&reg;
        b&copy;
        <br />
        
        <iframe name="mmyIframe" src="http://www.sina.com.cn" width="1000" height="400" frameborder="no" scrolling="yes"></iframe>