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

Html详解——Vue基础

news 2025/6/9 18:46:27

HTML是什么？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

HTML基础

HTML的组成

HTML由开始标签、内容和结束标签组成。

开始标签(0pening tag): 包含元素的名称(本例为 p)，被左、右角括号所包围。开头标签标志着元

素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。

内容(Content):元素的内容，本例中就是段落的文本。

结束标签(Closing tag):与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素

的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。

元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

注意：

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

嵌套元素

把元素放到其他元素之中——这被称作嵌套。

例如：P标签中嵌套这strong标签

<p>My cat is <strong>very</strong> grumpy.</p>

块级元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>, <p>, <table> ,<div>

 <h2>我是二级标题</h2><p>块级元素</p><b>内联元素</b><b>内联元素</b><br>

例如上述代码，块级元素<h2><p>结束后就会重新换行。

内联元素

内联元素在显示时通常不会以新行开始。例子：<b>, <td>, <a>, <img>

例如上述例子中的<b>两个标签连接着一起，不会换行

空元素

不包含任何内容的元素称为空元素。比如 <img> 元素：例如<br><hr>

<img src="images/firefox-icon.png" alt="My test image" />

本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

属性

属性包含额外的信息，这些信息不会出现在实际的内容中，可以添加多个属性

属性必须包含：

1、一个空格，它在属性和元素名称之间。

如果一个元素具有多个属性，则每个属性之间必须由空格分隔。

2、属性名称，后面跟着一个等于号，

3、一个属性值，由一对引号("")引起来。

下例子：<a>有三个属性

    <!--    双标签有属性--><!--属性class href超链接的web地址，title超链接的页面名称 target 在新标签页显示--><a title="w3school" target="_blank" href="https://www.w3school.com.cn/html/html_jianjie.asp">属性class实例</a><br>

布尔类型

有时候有些属性是没有值的，这些属性被称为布尔属性，

布尔属性只能有一个值，这个值一般与属性名称相同

例如下例中的disabled属性，没有值，是布尔属性

 <!--    单标签有属性-->布尔类型<input type="text" disabled/>

注意：属性中的单引号和双引号都可以

HTML中的特殊字符

    <p>空格：&nbsp;</p><p>小于号&lt;</p><p>大于号&gt;</p><p>与&amp;</p><p>单引号&apos;</p><p>双引号&quot;</p><p>版权&copy;</p><p>注册商标&reg;</p><p>商标&trade;</p><p>乘号&times;</p><p>除号&divide;</p>

HTML中常用的标签

Vue会使用各种样式库，基本的标签了解即可~

1、标题 h1-h6

 <h1>标题</h1>

2、段落 p

  <p >段落</p>

3 、无序列表 ul+li

<ul><li>无序列表</li><ul><li>元素1</li><li>元素2</li><li>元素3</li></ul></ul>

4、有序列表 ol+li

  <ol><li>有序列表</li><ol><li>元素1</li><li>元素2</li><li>元素3</li></ol></ol>

5 、重点强调 em斜体 strong加粗

 <em>强调</em> <br/>
<strong>加粗</strong> <br/>

6 、超链接 a

 <a href="https://www.baidu.com">超链接</a>

7 、换行 br

 <br/>

8 、水平分割线 hr

  <hr/>

9、图片 image

  <img src="/images/home.png" alt="图片"/>

10 、视频 video

11、音频 audio

12、表格 table tr td

table：每个表格的内容都包含在这俩标签中
tr：（列）
td：（行）
rowspan 纵向合并单元格
colspan 横向合并单元格

 <table><tr><td>序号1</td><td>1</td><td>2</td><td>3</td></tr><tr><td>序号2</td><td>2</td><td>4</td><td>6</td></tr></table><table><caption>员工信息表</caption><thead><tr><th>姓名</th><th>年龄</th><th>职业</th></tr></thead><tbody><tr><td>张三</td><td>28</td><td>工程师</td></tr><tr><td>李四</td><td>35</td><td>设计师</td></tr></tbody><tfoot><tr><td colspan="2">总计人数</td><td>2</td></tr></tfoot></table><style scoped>
table {/*边框合并*/border-collapse: collapse;/*border-collapse: separate;*//*border-collapse: inherit;*//*border-collapse: initial;*//*border-collapse: revert;*//*border-collapse: unset;*/
}td,
th {/*单元格边框*/border: 1px solid black;/*单元格内边距*/padding: 10px 20px;text-align: center;
}
</style>

上述输出截图：

HTML其他常用

1 HTML 样式示例
2 HTML 注释
3 HTML的id和class

HTML id 属性用于为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素。
（1） id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
（2）id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。（后面讲css时会详细介绍）
（3）JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

class 类，同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
<template><div><h2>html——其他基础</h2><div><hr><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p><hr></div></div>
</template>
结果：

HTML表单

form
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
表单提交时，必须设置表单元素的name属性值，否则无法获取数据。
表单需要结合表单元素一起使用。

常用属性
action 提交表单的地址

target 提交数据时打开窗口的方式
_self 当前窗口
_blank 空白窗口

2 下拉框

select 下拉框标签
option 下拉框的选项标签

select常用属性
multiple    设置下拉框可多选
size        设置下拉框可见选项数
disabled    禁用元素
option常用属性
selected    默认选中项
disabled 禁用某个选项
value 提交给服务器的选项值
如果设置了value属性值，则提交的是value的值；
如果未设置value属性值，则提交option双标签中的文本值

<form action="xxx.php" method="get"><!-- text 文本框 用户可以里面输入任何文字 -->用户名: <input type="text" name="username" value="" maxlength="6" placeholder="请输入用户名"> <br><br><!-- password 密码框 用户看不见输入的密码 -->密码: <input type="password" name="pwd"> <br><br><!-- radio 单选按钮  可以实现多选一 --><!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --><!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->性别:男 <input type="radio" name="sex" value="男">女 <input type="radio" name="sex" value="女" checked="checked">人妖 <input type="radio" name="sex" value="人妖"> <br><br><!-- checkbox 复选框  可以实现多选 -->爱好:吃饭 <input type="checkbox" name="hobby" value="吃饭">睡觉 <input type="checkbox" name="hobby">打豆豆 <input type="checkbox" name="hobby" checked="checked"><br><br>籍贯:<select><option>山东</option><option>北京</option><option>天津</option><option selected="selected">火星</option></select><br><br><!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --><input type="submit" value="免费注册"><!-- 重置按钮可以还原表单元素初始的默认状态 --><input type="reset" value="重新填写"><!-- 普通按钮 button  后期结合js 搭配使用--><input type="button" value="获取短信验证码"> <br><br><!-- 文件域 使用场景 上传文件使用的 -->上传头像: <input type="file"><br><br><input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准<br><a href="#"> 我是会员，立即登录</a></form>

本文主要用于学习Vue，回顾HTML基础