常用标签

常用标签

1.标题标签(h1-h6)

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 常用的标题标签是前4个:h1-h4 -->

2.段落标签(p):paragraph

<p>段落内容</p>
<p>这是段落1</p>
<p>这是段落2</p>
<!-- p标签内不能放块标签 -->

3.块和行内元素

<!-- 块级元素：对页面进行布局
行内元素：通常用来设置样式b、em、strong
块级标签内可以放任何标签，p除外
p中不能放任何标签 -->
<!-- 块级元素： div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr 
行内元素： span、img、a、label、input、em、b、big、i、q、textarea、select、small、sub、sup，strong、u -->
<p>
    <div>
        test
    </div>
</p>
<!-- span：没有什么语义，单独设置样式 -->
<p>1111111<span style="color:red;">这是一个span</span>111</p>

4.结构化标签(布局)

header
main
footer

nav:导航
aside：批注(和主体相关的其他内容)，侧边栏
section：没有以上标签合适的语义时，可以使用section，表示一个独立的区块
显示相同

5.列表(3)

 <!-- 5.1无序列表 -->
    <ul>
        <li>1<>
        <li>2<>
        <li>3<>
        <li>4<>
    </ul>
    <!-- 5.2有序列表 -->
    <ol>
        <li>1<>
        <li>2<>
        <li>3<>
        <li>4<>
        <li>5<>
    </ol>
    <!-- 5.3定义列表 -->
    <!-- description list -->
    <dl>
        <dt>操作系统</dt>
        <dd>操作系统是一组能有效组织和管理计算机硬件和软件资源。。。的集合</dd>
    <dl>

相对路径

<!-- 相对路径
        ./:表示当前文件所在目录(省略不写)
        ../：当前文件所在目录的上一级
-->

6.img图片标签

<!-- 6.图片img标签
    属性：
        src：图片地址
        alt：加载不出来时显示的文字
        title：鼠标滑过时,显示的文字
    -->

<img src="./path/QQ图片20210327180908.png" alt="图片1" title="pic">

7.a超链接标签

<!-- 属性：
        href跳转
            ①外部网址
            ②内部页面
        target:
            ①_self
            ②_blank
-->
 <a href="https://www.baidu.com" target="_blank">百度</a>

8.表格

<!-- 8.1
    table:表格标签
    caption:表头
    tr:table row，表格的行
        th:表格的标题
        td:表格的列元素 
-->
<table border="1">
    <caption>表头</caption>
    <tr>
        <th>html</th>
        <th>css</th>
        <th>js</th>
    </tr>
    <tr>
        <td>1天</td>
        <td>2天</td>
        <td>3天</td>
    </tr>
</table>
<!-- 8.2 创建表格的三个区域 
    thead：表头 表格头部,一般放<tr>和<th>标签。
    tbody：表身 表格内容,一般放<tr>和<td>标签。
    tfoot：表尾 表格脚部标注,一般放<tr>和<td>标签。
-->
<table border="1">
    <thead>
        <tr>
            <td>科目</td>
            <td>分数</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>语文</td>
            <td>111</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>121</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>130</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总分</td>
            <td>362</td>
        </tr>
    </tfoot>
</table>

9.表单标签

9.1 form标签创建表单

<form method="传送方式" action="服务器文件"></form>

9.2输入框 input

<!--input 
    type:text(文本)、password(密码)、number(数字)、url(网址)、email(邮箱)
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)
placeholder:提示 
-->
    <!-- 9.2.1 text-->
    <input type="text" placeholder="ddd">
    <!-- 9.2.2 password:··· -->
    <input type="password">
    <!-- 9.2.3 number:只能输入数字，调整数字大小-->
    <input type="number">
    <!-- 9.2.4 url:数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。-->
    <!-- 9.2.5 email:数字框的值@之后必须有内容,否则会报错误提示 -->
    <!-- 9.2.6 textarea:文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <!-- 9.2.7 label: 
        for:控件id名称
    -->
    <label for="id"></label>
    <input type="text" id="id">
    <!-- 9.2.8 单选框、复选框 -->
    <!-- 单选框 -->
    <label>性别：</label>
    <label>女：</label>
    <input type="radio" value="1" name="gender">
    <label>男：</label>
    <input type="radio" value="2" name="gender">
    <br>
    <!-- 复选框 -->
    <label>你喜欢的饮料有哪些？</label>
    <label>可乐</label>
    <input type="checkbox" value="1" name="drink">
    <label>橙汁</label>
    <input type="checkbox" value="2" name="drink">
    <label>小茗同学</label>
    <input type="checkbox" value="3" name="drink">
    <!-- 9.2.9下拉菜单 select-->
    <select>
        <!-- value:向服务器提交的值 显示的值 selected默认被选中 -->
        <option value="read">读书</option>
        <option value="run" selected="selected">跑步</option>
        <option value="shop">购物</option>
    <select>
    <!-- 9.2.10 提交按钮 -->
    <input type="submit" value="提交">
    <!-- 9.2.11 重置按钮 -->
    <form action="">
        <input type="text" placeholder="ddd">
        <input type="reset" value="重置">
    </form>