当前位置：首页 > article >正文

【Web】0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单

article 2024/12/4 13:12:01

0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单

html基本骨架
语义化标签
- 图片属性
- a链接
非语义化标签
- 特殊符号
- 标签
列表
- 无序列表
- - 结果展示
- 有序列表
- - 结果展示
- 定义列表
- - 结果展示
表格
- table属性
- tr属性
- - 结果展示
表单
- 单标签
- form属性
- input属性
- select
- textarea
- button
- - 结果展示

html基本骨架

<!-- 告诉浏览器按照h5的规范解析网页 -->
<!DOCTYPE html>
<html>
<head>
    <!-- 编码格式 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    网页内容
</body>
</html>

语义化标签

图片属性

     src:图片路径
     alt:图片加载不出来的替代文字
     title:鼠标悬浮的图片标题
     width:图片宽度
     height:图片高度
     相对路径:相对于当前文件
       ./：同级
       ../： 回到上一级
     绝对途径从盘符开始

a链接

href:链接地址
target=“_blank”:打开新标签页

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>
    <!-- 水平线 -->
    <hr>
    <p>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午</p>
    <p>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午。</p>
    <img src="./img/01.webp" alt="当地时间11月19日下午" title="当地时间11月19日下午" width="300">
    <img src="https://gips3.baidu.com/it/u=1767570488,630141960&fm=3028&app=3028&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000" alt="">
    <a target="_blank" href="http://www.baidu.com">百度</a>
    <a target="_blank" href="./1-html基本骨架.html">html基本骨架</a>
</body>

非语义化标签

特殊符号

<小于
>:大于
  &ensp; &emsp;空格
"双引号
©版权符号+

<body>
    <!-- 布局盒子 -->
    <div>
        <p>
            当地时间11月19日下午<span style="color:red">当地时间11月19日下午</span>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午<br>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午
        </p>
        <!-- 小标签 -->
        <!-- 下标 -->
        h<sub>2</sub>o
        <!-- 上标 -->
        x<sup>2</sup>

        <em>倾斜</em>
        <strong>加粗</strong>
        <span>行级标签</span>
        <div>
            &lt;你&nbsp;好&gt;
        </div>
        <div>
            &lt;你&ensp;好&gt;
        </div>
        <div>
            &lt;你&emsp;好&gt;
        </div>
        <div>
            &quot;张三&quot;
        </div>
        <div>
            &copy;版权所有
        </div>

    </div>
</body>

列表

无序列表

无序列表使用 <ul> 标签定义，每个列表项使用 <li> 标签表示。无序列表通常使用圆点、方块或其他符号作为标记。

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>橘子</li>
</ul>

结果展示

在这里插入图片描述

有序列表

有序列表使用 <ol> 标签定义，每个列表项也使用 <li> 标签表示。有序列表中的项目会自动编号（通常是阿拉伯数字，但也可以是罗马数字或字母）。

<ol>
   <li>香蕉</li>
   <li>苹果</li>
   <li>橘子</li>
</ol>

结果展示

在这里插入图片描述

定义列表

定义列表使用 <dl> 标签定义，包含术语（术语描述项）和描述（术语定义项）。术语使用 <dt> 标签表示，描述使用 <dd> 标签表示。

<dl>
    <dt>水果</dt>
    <dd>香蕉</dd>
    <dd>苹果</dd>
    <dd>橘子</dd>
    <dt>蔬菜</dt>
    <dd>菠菜</dd>
    <dd>荠菜</dd>
    <dd>白菜</dd>
</dl>

结果展示

在这里插入图片描述

表格

table属性

border：边框大小
cellspacing:格与格的间距
width:宽
height:高
bgcolor:背景颜色
align=“center”：相对于父元素水平居中
rules:
rows：保留行线
cols:保留列线
all:保留行列线
none:去掉行列线

tr属性

align=“center”：文本内容水平居中
bgcolor:背景颜色

<body>
    <div>
        <table align="center" border="1" cellspacing="0" width="500" height="300" bgcolor="lightblue">
            <caption><h2>同级成绩</h2></caption>
            <thead>
                <tr bgcolor="blue"><th>姓名</th><th>语文</th><th>数学</th></tr>
            </thead>
            <tbody>
                <tr align="center"><td>张三</td><td colspan="2">80</td></tr>
                <tr align="center"><td>李四</td><td rowspan="2">90</td><td>86</td></tr>
                <tr align="center"><td>王五</td><td>82</td></tr>
            </tbody>
            <tfoot></tfoot>
        </table>
<br>
        <table style="border-color:red"  rules="all" cellspacing="0" width="500" height="300" bgcolor="lightblue">
            <thead>
                <tr bgcolor="blue"><th>姓名</th><th>语文</th><th>数学</th></tr>
            </thead>
            <tbody>
                <tr align="center"><td>张三</td><td>80</td><td>80</td></tr>
                <tr align="center"><td>李四</td><td>90</td><td>86</td></tr>
                <tr align="center"><td>王五</td><td>90</td><td>82</td></tr>
            </tbody>
            <tfoot></tfoot>
        </table>
    </div>
</body>

结果展示

在这里插入图片描述

表单

单标签

br hr input img

form属性

action: 表单提交的网络地址
method:提交方式， get post

input属性

checked:默认选中
name:表单名称
value: 接收用户输入值
type：表单类型
text:文本框
password:密码框
radio:单选框
checkbox:单选框
file:文件上传
datetime-local：日期
submit:提交按钮
image：提交按钮
button: 普通按钮
reset:重置，恢复默认设置

select

select: 下拉框
selected:默认选中

textarea

多行文本域

button

提交按钮

<body>
    <div>
        <form action="#" method="get">
            用户名: <input type="text" name="username" value="李四"> <br>
            密码: <input type="password" name="pwd"> <br>
            性别:
                <input type="radio" name="sex" value="1" >男
                <input type="radio" name="sex" value="2" checked>女<br>
            爱好:
                <input type="checkbox" name="hobbys" value="1">购物
                <input type="checkbox" name="hobbys" value="2" checked>编程
                <input type="checkbox" name="hobbys" value="3" checked>打游戏
                <input type="checkbox" name="hobbys" value="4">睡觉 <br>
            地址:
                 <select name="address">
                    <option value=""></option>
                    <option value="1">河南</option>
                    <option value="2" selected>河北</option>
                    <option value="3">山东</option>
                 </select> <br>
            上传:
               <input type="file" name="file" multiple> <br>
            出生日期:<input type="datetime-local" name="dt"> <br>
            评论:
               <textarea name="comment"  cols="30" rows="10"></textarea> <br>
            <input type="submit" value="登录">
            <!-- <input type="image" src="./img/01.webp"> -->
            <button>提交</button>
            <input type="button" value="普通按钮" onclick="alert('确定吗')">
            <input type="reset" >
        </form>
    </div>
</body>