HTML知识小结

发布于：2022-12-28 ⋅ 阅读:(354) ⋅ 点赞:(0)

目录

HTML介绍

  1. HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
  • 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页的标题</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>
</body>
</html>

2.HTML 、CSS 、JavaScript三者之间的关系

  • HTML用于承载网页的内容（文本、图片、语音、视频）主体
  • CSS用于实现网页内容的装饰（字体、颜色、布局）修饰
  • JavaScript用于实现网页内容的特效（交互、弹出、滑动）行为

HTML标签

1.html标签属性

  • 图示
    在这里插入图片描述
  • 属性的注意点
  • 标签的属性写在开始标签内部
  • 标签上可以同时存在多个属性
  • 属性之间以空格隔开
  • 标签名与属性之间必须以空格隔开
  • 属性之间没有顺序之分

2.竖排标签

  • <h1></h1>标题标签,独占一行。

  • <h1>世界，你好！</h1>

  • 代码效果
    在这里插入图片描述

  • 代码效果
    在这里插入图片描述

  • <p></p>段落标签，独占一行。

  • <br>换行标签，只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

  • <pre> 原样输出</pre>

  • <hr>水平线

  • 代码效果
    在这里插入图片描述
    在这里插入图片描述

3.文本格式化标签

  • <b> 加粗</b>
  • <u> 下划线</u>
  • <i> 文字倾斜</i>
  • <s> 加删除线</s>
  • 代码效果
    在这里插入图片描述

4.媒体标签

  • 图片标签：在网页中显示图片

  • <img src="https://img0.baidu.com/it/u=2068515329,2057263552&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=496" width=700 height=496 alt="图片不存在时显示的文字" title="鼠标移到图片上显示的文字"

  • src:图片路径指——图片链接或本地图片的绝对路径和相对路径（.当前目录..上一级目录）

  • alt:图片加载失败时，当光标移到图片上时会显示的文本

  • 音频标签

  • <audio src="" controls></audio>

  • src：音频的路径

  • controls：显示播放的控件

  • autoplay：自动播放

  • loop：循环播放

  • 代码效果
    在这里插入图片描述

  • 视频标签

  • <video src="" controls></video>

  • 代码效果
    在这里插入图片描述

5.超链接标签

  • 使用场景: 点击之后，从一个页面跳转到另一个页面
  • 别称: a标签、超链接、锚连接
  • <a href="具体的网址">按钮</a>
  • <a href="http://www.baidu.com">跳转百度 target=_self 默认值，在当前窗口中跳转
  • <a href="http://www.baidu.com" target="_blank">跳转百度</a>
  • 锚点链接（置顶功能） <a> （缺点：每次都要刷新页面）
  • ①创建锚点（锚点）
  • <a href=""name=”mao”>锚点</a>
  • ②指向锚点（点击）
  • <a href="#mao" >回到顶部</a>

6.列表标签

  • 无序列表（常用于导航）
  • 场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
  • ul: 表示无序列表整体，用来包裹li标签
  • li: 表示无序列表的每一项,用于包含每一行的内容
  • 显示特点:列表的每一项前，默认显示圆点标识
    不同的项目符号
    disc 实心小圆点
    Circle 空心小圆圈
    Square 正方形
               <ul>
                    <li>乐观开朗</li>
                    <li>积极向上的态度</li>
                    <li>好好学习</li>
                </ul>

  • 代码效果
    在这里插入图片描述

  • 有序列表

  • 场景：在网页中表示一组有顺序之分的列表，如：排行榜

  • ol: 表示有序列表整体，用来包裹li标签

  • li: 表示有序列表的每一项,用于包含每一行的内容

							<ol>
                                    <li>乐观开朗</li>
                                    <li>积极向上的态度</li>
                                    <li>好好学习</li>
                            </ol>

  • 代码效果
    在这里插入图片描述

  • 自定义列表

  • 场景：在网页的底部导航中通常会使用自定义列表实现。

  • dl：用于自定义列表的整体，用于包裹dt/dd标签

  • dt: 表示自定义列表的主体

  • dd: 表示自定义列表的针对主体的每一项

               <dl>
                        <dd>乐观开朗</dd>
                        <dd>积极向上的态度</dd>
                        <dd>好好学习</dd>
                </dl>
  • 代码效果
    在这里插入图片描述

HTML表格

1.表格的基本标签

  • <table></table>是用于定义表格的标签。
  • <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
  • <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  • 字母td指表格数据（table data），即数据单元格的内容。
<table border=1>
               
                <tr>
                    <td> 1行1列</td>
                    <td> 1行2列</td>
                    <td> 1行3列</td>
                    <td> 1行4列</td>
                </tr>  
                <tr>
                    <td> 2行1列</td>
                    <td> 2行2列</td>
                    <td> 2行3列</td>
                    <th> 加粗 </th>
                </tr>
 </table>
  • 代码效果
    在这里插入图片描述
  • 嵌套关系： table > tr > td
  • 表格标题及单元格标签
  • caption:表示表格的整体大标题,写在table标签内部
  • th:表示一列小标题，通常写于表格的第一行

2.表格相关属性

在这里插入图片描述在这里插入图片描述

3.合并单元格

  • 合并单元格方式：

  • 跨行合并:rowspan="合并单元格的个数”

  • 跨列合并: colspan="合并单元格的个数”
    在这里插入图片描述

  • 目标单元格:(写合并代码)

  • 跨行:最上侧单元格为目标单元格,写合并代码

  • 跨列︰最左侧单元格为目标单元格,写合并代码

  • 合并单元格三步曲：
    1．先确定是跨行还是跨列合并。
    2．找到目标单元格.写上合并方式=合并的单元格数量。比如: <tdcolspan= “2”>。
    3．删除多余的单元格。

HTML表单

1.定义HTML表单

  • HTML表单用于提交不同类型的用户数据给处理程序处理

  • <from action="处理程序路径" method="POST"></from>

2.input系列

（1）input创建单行文本框

  • 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
  • input 创建单行文本框
  • 昵称：<input type="text" name="" id="" placeholder="请输入昵称">
  • placehold：指输入框的提示文字
  • size :指定文本框中能够显示的字符数。
  • value:设置文本框的初始值
  • maxlength :指定文本框可以接收的最大字符数
  • type="text":是定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

（2）<textarea>创建多行文本框

  • <textarea cols="60" rows="10"></textarea>

  • <textarea>是多行文本框，需要指定文本框的大小。

  • rows：指定的是文本框的字符行数。

  • cols：指定的是文本框的字符列数。

  • input 和不同之处
    1.多行显示字符串。input只能单行显示
    2.的初始值必须要放在和之间
    3.input是单标签 ，是闭合标签
    4.的值是纯文本；的值根据类型不同而不同；

3.密码框

  • 在网页中显示输入密码的表单控件
  • type属性值：password

4.单选框

  • 在网页中显示多选一的单选表单控件
  • type属性值: radio
  • 常用属性

5.多选框

  • 在网页中显示多选多的表单空间
  • type属性值：checkbox
  • 常用属性：checked （默认选中）

6.文件选择

  • 在网页中显示文件选择的表单控件
  • type属性值: file
  • multiple 多文件选择

7.按钮

  • 在网页中显示不同功能的表单控件
  • type属性值
  • submit 提交按钮，点击之后提交数据给处理程序
  • buttom 普通按钮，默认无功能，之后配合js使用
  • reset 重置按钮，点击之后表单默认值

8.select下拉菜单标签

  • 在网页中提供多个选项的下拉菜单控件
  • select标签: 下拉菜单的整体
  • option: 下拉菜单的每一项
  • 常见属性: selected下拉菜单的默认选中

9.textarea 文本域标签

  • 在网页中提供可输入多行文本的表单控件
  • textarea
  • 常见属性:
  • cols: 设置文本域内可见初始宽度
  • rows: 设置文本域内可见初始行数
    在这里插入图片描述

常见语义化标签

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->

字符实体

  • &nbsp;空格
  • &gt;>
  • &lt;<
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布