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

《前端web开发-HTML5基础》

article 2024/12/24 13:23:11

文章目录

《前端web开发-HTML5》
- ==03.语法标签==
- ==04.HTML基本骨架==
- ==05.标签的关系==
- ==06.注释==
- ==07.排版标签-标题和段落==
- ==08.换行和水平线标签==
- ==09.文本格式化标签==
- ==10.图像标签==
- ==11.相对和绝对路径==
- ==12.超链接标签==
- ==13.多媒体标签--音频和视频==
- ==17.无序、有序和定义列表==
- ==18.表格-基本使用与表格结构标签==
- ==19.合并单元格==
- ==20.表单-input标签==
- ==21.表单-下拉菜单==
- ==22.表单-文本域==
- ==23.表单-label标签==
- ==24.表单-按钮==
- ==25.div和span标签和字符实体==
- ==26.综合案例1==
- ==27.综合案例2==

《前端web开发-HTML5》

03.语法标签

标签成对出现，中间包裹内容
<>里面放英文字母，标签名；
结束标签比来时标签多 /
标签分类

 	* 双标签 例：<strong>...</strong>(加粗)
 	* 单标签 例：<hr>（分割线）

04.HTML基本骨架

vscode如何快速生成HTML骨架：！+Enter或Tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <strong>文字内容</strong>
    <hr>
</body>
</html>

html：整个网页
head：网页头部
title：网页标题
body：网页主题（内容）

05.标签的关系

父子关系（嵌套关系）
兄弟关系（并列关系）

06.注释

语法：快捷键：ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- 这是注释内容<br> -->
     <!-- <strong>这是注释内容</strong> -->
</body>
</html>

07.排版标签-标题和段落

标题标签一共有 6 级别?标签名分别是什么?
- h1~h6
在浏览器中，各个标题标签的显示效果有什么特点?
- 文字加粗
- 字号逐渐减小
- 独占一行
哪个标题标签有使用次数的限制?
- h1:一个网页就用一次，用来放新闻标题或网页 Logo
段落标签名是什么?p(双标签)
在浏览器中，段落标签的显示效果是什么?
- 独占一行段落之间有间隙

08.换行和水平线标签

换行标签：<br>(单标签)
水平线标签：<hr>(单标签)

09.文本格式化标签

作用:为文本添加特殊格式，以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
加粗：<strong>需要加粗的文字</strong>
倾斜：<em>需要倾斜的文字</em>
下划线：<ins>需要添加下划线的文字<ins>
删除线：<del>需要添加删除线的文字<del>

10.图像标签

作用：在网页中插入图像
语法：<img src=“图片的URL” >
图像标签的属性
- 替换文本：alt
- 提示文本：title
- 图片的宽度：width
- 图片的高度：heigth

11.相对和绝对路径

12.超链接标签

语法：<a href=“https://www.baidu.com/” >跳转到百度
开发初期，不确定跳转地址，如何书写 href属性值?
- # 空链接
target=“ _blank”属性的作用是什么?
- 保留原有页面，在新窗口打开链接页面

13.多媒体标签–音频和视频

音频标签语法：<audio src=“音频的URL”>\
- controls：显示音频的控制面板
- loop：循环播放
- autoplay：自动播放
视频标签语法：<video src=“视频的URL”>
- controls：显示视频的控制面板
- loop：循环播放
- autoplay：自动播放
- muted：静音播放

17.无序、有序和定义列表

无序列表

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目

<body>
    <ul>
        <li>列表标签1</li>
        <li>列表标签2</li>
        <li>列表标签3</li>
    </ul>
</body>

ul标签只能包裹li标签；
li标签里可以包裹任何内容

有序列表

标签：ol 嵌套 li ol 是有序列表，li是列表条目

<body>
    <ol>
        <li>列表标签1</li>
        <li>列表标签2</li>
        <li>列表标签3</li>
    </ol>
</body>

ol标签只能包裹li标签；
li标签里可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd ，dt是定义列表的标题，dd是定义列表的描述/详情

<body>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>
</body>

18.表格-基本使用与表格结构标签

标签：table 嵌套 tr，tr 嵌套 th 和 td

标签名说明
table 表格
tr 行
th 表头单元格
td 内容单元格

标签名		说明
table		表格
tr		行
th		表头单元格
td		内容单元格

<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>

表格结构标签
- 作用：用表格结构标签把内容划分区域，容表格结构更清晰，语义更清晰。
标签名含义特殊说明
thead 表格头部表格头部内容
tbody 表格主体主要内容区域
tfoot 表格底部汇总信息区域

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

<body>
    <table border="1">
        <thead>
        </thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>

19.合并单元格

在这里插入图片描述

20.表单-input标签

在这里插入图片描述

21.表单-下拉菜单

在这里插入图片描述

22.表单-文本域

文本域：输入多行文本的表单控件
标签：textarea 双标签

语法： <textarea>默认提示文字</textarea>

23.表单-label标签

作用，网页中，某个标签的文本说明；
经验：用lable标签绑定文字和表单控件的关系，增大表单控件的点击范围
Ctrl + B 关闭/打开Vscode侧边栏

24.表单-按钮

button标签

语法：<buttton type=“”>按钮</button>

type属性值说明：
- submit：提交按钮，点击后可以提交数据到后台
- reset：重置按钮，点击后将表单控件恢复的默认值
- button：普通按钮，默认没有功能，一般配合javaScript使用

25.div和span标签和字符实体

无语义的布局标签div和span
作用：布局网页（划分网页区域，摆放内容）
div：独占一行
span：不换行
字符实体
作用：在网页中显示预留字符
举例：空格：&nbsp；大于号：&lt；小于号：&gt；

26.综合案例1

在这里插入图片描述

27.综合案例2

在这里插入图片描述

<body>
    <h1>注册信息</h1>
    <form>
        <!-- 个人信息 -->
         <h2>个人信息</h2>
        <label>姓名：</label>
        <input type="text" placeholder="请输入真实姓名">
        <br><br>
        <label>密码：</label>
        <input type="password" placeholder="请输入密码">
        <br><br>
        <label>确认密码：</label>
        <input type="password" placeholder="请再次输入密码">
        <br><br>
        <label>性别：</label>
        <input type="radio" name="gender" id="man"><label for="man">男</label> 
        <input type="radio" name="gender" checked id="woman"><label for="woman">女</label>
        <br><br>
        <label>居住城市：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>武汉</option>
        </select>
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历：</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称：</label>
        <input type="text" placeholder="请输入学校名称">
        <br><br>
        <label>所学专业：</label>
        <input type="text" placeholder="请输入所学专业">
        <br><br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        ---
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>工作经历：</label>
        <input type="text" placeholder="请输入工作经历">
        <br><br>
        <label>工作描述：</label>
        <br>
        <textarea></textarea>
        <br><br>
        <input type="checkbox"><label></label>已阅读并同意一下协议：
        <ul>
            <li><a href="#">《用户服务协议》</a></li>
            <li><a href="#">《隐私政策》</a></li>
        </ul>
    </form>
</body>