HTML标签简介

Lsclever

已于 2022-06-16 21:29:21 修改

阅读量107

点赞数

文章标签：前端 html css

于 2022-06-16 21:27:36 首次发布

本文链接：https://blog.csdn.net/weixin_47648494/article/details/125276156

版权

网页：它是由文字图片音频视频超链接等组成的，一个网站包含多个网页。

网站：实际生活中淘宝、京东、等都称作网站。

浏览器

常见的浏览器有IE Google等，创建的IE浏览器内核是trident ，Google浏览器内核是webkit

WEB标准

web标准主要分为结构（html）、样式（css）、行为（js），其中html主要是网页框架构建、样式主要是页面美化、行为主要是网页之间数据的交互。

HTML

html不是编程语言，它是超文本标记语言，

html标签主要分为嵌套和并列两种关系，标签分为单标签和双标签，

常见的双标签h1-h6、p等双标签是一个盒子，里面可以嵌套内容

创建的单标签有br（换行）、hr（水平线）

**语义化标签**
标题标签（h1 -h6）	默认加粗、文字大小随着数字大小递减、独占一行，一般 h1建议在网页出现一次，h2出现两次，h3-h6可以出现多次
段落标签（p）	里面可嵌套文字和图片
文本格式化标签	加粗 b 、strong 倾斜 em 、i 下划线 ins 、u 删除线 del 、s

语义化标签
span	行内元素，可以一行存放多个，设置宽高失效，上下边距失效，左右边距不失效
div	块元素，独占一行，宽高可以设置，如果没有设置宽，默认是和父级元素宽相同

无序列表：一个ul可以嵌套多个li，li里面可以嵌套任何标签

 <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>

有序列表：

 <ol>
    <li></li>
    <li></li>
    <li></li>
   </ol>

自定义列表：dt表示标题、dd表示要描述的内容、

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dl>

路径：

主要分为相对路径和绝对路径；

相对路径

同级路径
下级路径（重点）
上级路径

绝对路径

在线网址
带有盘符的路径（不推荐）

表格（合并单元格）

border：表格边框线；cellpadding ：表格内容与边框之间的空白处距离；

rules：表格细线；width：表格宽度；

<table border="1" cellpadding="10" rules="all" width="400">
        <tr>
            <td colspan="2">1</td>
            <!-- <td>2</td> -->
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">1</td>
            <!-- <td>2</td> -->
            <td>3</td>
            <td rowspan="3">4</td>
        </tr>
        <tr>
            <!-- <td colspan="2">1</td> -->
            <!-- <td>2</td> -->
            <td>3</td>
            <!-- <td>4</td> -->
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <!-- <td>4</td> -->
        </tr>
    </table>

其中合并单元格主要分为三个步骤；

先找到需要合并的单元格是跨行合并（从上到下）还是跨列合并（从左到右）跨行合并rowspan，跨列合并colspan
找到需要合并目标单元格的第一个格子，然后写属性=”属性值“；
删除多余格子

表单

表单主要用来手机用户信息

表单域，用来将表单收集的用户信息，提交到对应的位置，提示文本和表单控件必须要放在表单域中

表单控件主要分为input表单控件、下拉列表、文本域

input表单控件主要是通过修改input的type属性的取值不同，实现不同的功能比如：

文本框 type的取值为text

密码框 type得到取值为password

单选按钮 type取值为radio，想要实现单选效果需要设置相同的name属性取值

复选框 type的取值为checkbox ；默认选中用checked属性

常见属性

value：表单默认值，一般设置为空

placeholder：占位符，

name 给表单起名分类

maxlength最大长度

select下拉列表默认选中就用sellected；

<select name="" id="">
            <option value="" selected>钱塘区</option>
            <option value="">上城区</option>
            <option value="">西湖区</option>
            <option value="">滨江区</option>
        </select>

textarea文本域

  个人介绍：<br><br><textarea cols="30" rows="10" placeholder="请输入内容"></textarea><br>

按钮

input：button 普通按钮

input：submit 提交按钮

input：reset 重置按钮

input：file multile可以上传多个文件

input：image上传图片

<button> 普通按钮 <button>具有提交功能

<input type="submit" value="免费注册">
        <input type="reset" value="重置">

案例

 <h2>青春不常在,抓紧谈恋爱</h2>
    <hr>
    <form action="">
        昵称:<input type="text" name="" id="" value="" placeholder="请输入用户名"><br><br>

        性别：<input type="radio" name="sex" id="" checked>男
        <input type="radio" name="sex" id="">女<br><br>
        所在城市：<select name="" id="">
            <!-- selected默认选中 -->
            <option value="" selected>上海</option>
            <option value="">北京</option>
            <option value="">南京</option>
            <option value="">杭州</option>
        </select>
        
        <select name="" id="">
            <option value="" selected>钱塘区</option>
            <option value="">上城区</option>
            <option value="">西湖区</option>
            <option value="">滨江区</option>
        </select>
        <br><br>
        婚姻状况：<input type="radio" name="marry" id="" checked>未婚
        <input type="radio" name="marry" id="">已婚
        <input type="radio" name="marry" id="">保密<br><br>
        喜欢的类型: <input type="checkbox" name="" id="" checked>可爱
        <input type="checkbox" name="" id="" checked>性感
        <input type="checkbox" name="" id="">御姐
        <input type="checkbox" name="" id="">萝莉
        <input type="checkbox" name="" id="">小鲜肉
        <input type="checkbox" name="" id="">大叔<br><br>
        个人介绍：<br><br><textarea cols="30" rows="10" placeholder="请输入内容"></textarea><br>
        <h3> 我承诺</h3>
        <ul>
            <li>年满18岁,单身</li>
            <li>抱着严谨的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <div><input type="checkbox" name="" id="">我同意所有的条款</div><br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <br><br><br>


       

    </form>

效果图