Html详解——Vue基础

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><!--  后期会使用其他的样式库,所以就简单介绍一下比较常用的标签--><!--1 HTML 样式示例    2 HTML 注释ctrl+/ctrl+shift+/3 HTML的id和classHTML id 属性用于 为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。id 的语法是:写一个井号 (#),后跟一个 id 名称。然后,在花括号 {} 中定义 CSS 属性。(后面讲css时会详细介绍)JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素class 类,同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用:--><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基础

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/394856.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Vue]Vue3从入门到精通-综合案例分析

一.Vue是什么&#xff1a; 概念&#xff1a;Vue是一个用于构建用户界面的渐进式的框架 以下的内容是自里向外的 声明式渲染(Vuejs核心包)组件系统(Vuejs核心包)客户端路由VueRouter大规模状态管理Vuex构建工具Webpack/Vite Vue的两种使用方式&#xff1a; Vue核心包开发-&…

DSL domain specific language of Kola

How we design Kola - ApiHugKola background, Kola a consumer driver tester frameworkhttps://apihug.com/zhCN-docs/kola/003_dsl_contract Concept 在 Kola 定位中 Kola 是什么, 是致力于提供一个让相关各方都能够理解共同创造的测试框架和工具。 同时 Kola 是建立于业界…

node中使用http创建web服务器

1.案例代码 // 1.导入http模块 const http require(http)// 2.创建web服务器实例 const server http.createServer()// 3.为服务器实例绑定request事件&#xff0c;监听客户的请求 server.on(request,function(req,res){console.log(欢迎来到服务器);// req.url是客户端请求…

Kubernets(k8s) 网络原理二:Pod访问外网

上一篇文章中&#xff0c;我们介绍了pod与宿主机通信&#xff0c;并且通过network namespace模拟了通信过程。回顾整个流程&#xff0c;无非就涉及到两个东西&#xff0c;通信设备和路由规则。 本文要讲的&#xff0c;也离不开这两个东西&#xff0c;只不过需要对容器IP进行额…

学习c语言第24天(练习)

编程题 第一题 最大公约数最小公倍数求和 //求最大公约数和最小公倍数之和 //暴力求解 //int main() //{ // int n 0; // int m 0; // while (scanf("%d %d", &n, &m)2) // { // int min n < m ? n : m; // int max n > m ? n : m; //…

Stable Diffusion 使用详解(7)---AI 摄影

目录 背景 底模的选择 例子 majicMix GirlFriendMix&#xff08; Lora&#xff09; 对比效果 LEOSAMs MoonFilm ADetailer 使用 说明 例子 问题 处理方式 效果 背景 魔法师使用魔法作的画有时候太过完美&#xff0c;以至于有点脱离真实摄影的感觉&#xff0c;我们…

【电控笔记z14z16】增加霍尔元件分辨率

霍尔传感器用的不多?实际增量编码器更好 z14 假设60度内速度不变 z16(更简单的方法)BLDC

【机器学习】BP神经网络正向计算

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 BP神经网络正向计算1. 引言2. BP神经网络结构回顾3. 正向计算的基本原理4. 数学…

7.3.1.算法设计与分析-总结及真题讲解

总结 分治法特征&#xff1a;把一个问题拆分成多个小规模的相同子问题&#xff0c;一般可用递归解决。 经典问题&#xff1a;斐波那契数列、归并排序、快速排序、矩阵乘法、二分搜索、大整数乘法、汉诺塔 回溯法特征&#xff1a;系统的搜索一个问题的所有解或任一解。 经典问题…

ctfhub文件上传

⽆验证 上传⼀句话⽊⻢&#xff0c;发现上传成功 1.php ⼀句话⽊⻢内容&#xff1a; <?php eval($_POST[cmd]);?> 上传⼀句话⽊⻢&#xff0c;发现上传成功 http://challenge-8b27d18368ecc25c.sandbox.ctfhub.com:10800/upload/1.ph p 前端验证 开启题⽬ 上传⼀个…

[Modbus] Modbus协议开发-基本概念(一)

历史 ModBus官网是Modicon&#xff08;Modicon早年已被施耐德收购&#xff09;公司为其PLC通讯而开发的一种通讯协议。 概述 通过Modbus协议&#xff0c;控制器之间、或控制器经由网络&#xff08;如以太网&#xff09;可以和其它设备之间进行通信。 优点 免费、好用、成熟…

DIRB:一款强大的Web目录扫描工具使用指南

网安学习交流 DIRB是一款广泛使用的开源Web内容扫描工具&#xff0c;它专注于发现Web服务器上存在的目录和文件。对于安全研究员、渗透测试人员以及Web开发者来说&#xff0c;DIRB是一个不可或缺的工具&#xff0c;它能帮助他们识别潜在的入口点&#xff0c;从而进一步评估目标…

Java学习Day20

Vue学习 nodejs的安装与环境配置 1.直接去官网下载合适版本的nodejs( https://nodejs.org/zh-cn/download/prebuilt-installer) 2.解压下载的安装包&#xff0c;将文件路径配置到系统变量的path中&#xff0c;然后确认后退出。可以使用终端来查看安装的nodejs版本。使用winR…

【C++ Primer Plus】学习笔记 4

文章目录 前言一、结构类型1.在程序中使用结构2.C11结构初始化3. 结构可以将 string 类作为成员吗4.其他特性5.结构数组 二、共用体三、枚举1.设置枚举量的值2. 枚举的取值范围 前言 该笔记内容为书第四章——复合类型&#xff0c;加油加油 一、结构类型 结构是用户定义的类型…

文件:ls,ll,fcpgets,cpwr

1、fcpgets fgets和fputs用于处理文本文件&#xff0c;而不是二进制文件&#xff0c;因为会进行换行符的处理&#xff0c;图片文件包含二进制数据并且包含\0字符&#xff0c;会出现意外终止条件。 2、cprw fread&#xff1a;函数从文件流中读取数据&#xff0c;储存到指向空间…

【Android Studio】gradle文件、配置、版本下载、国内源(SDK版本、gradle版本以及gradle-plugin(AGP)版本)

文章目录 AS查看gradle-plugin版本及gradle版本&#xff08;图形&#xff09;查看gradle-plugin版本及gradle版本&#xff08;配置文件&#xff09;配置文件分析解决gradle下载失败、版本错乱等问题。 Gradle 是一个基于 Apache Ant 和 Apache Maven 概念的自动化构建工具&…

Linux:多线程(二.理解pthread_t、线程互斥与同步、基于阻塞队列的生产消费模型)

上次讲解了多线程第一部分&#xff1a;Linux&#xff1a;多线程&#xff08;一.Linux线程概念、线程控制——创建、等待、退出、分离&#xff0c;封装一下线程&#xff09; 文章目录 1.理解Linux下线程——理解tid2. Linux线程互斥2.1相关概念2.2引入问题分析问题解决思路 2.3L…

牛客网每日刷题之 HJ99.自守数(C++)

在不断学习的过程中也不能忘记了基础知识的巩固&#xff0c;在学习新的知识后要学会去举一反三&#xff0c;前不久我刚刚了解了一些关于 string 类的知识&#xff0c;对牛客网的 自守数 有了新的解题思路&#xff0c;让我们一起看看这道题吧 思路解析 a. 整数方法 1. 首先我们知…

盘点5个PDF 怎么转换成 Word 的实用技巧

在日常的办公和学习中&#xff0c;要将 PDF 文件转换成 Word 是很常有的事。方便我们编辑、修改内容或者是提取其中的内容。一般都会用到一些工具&#xff1b;下面&#xff0c;我将为大家介绍5种高效且实用的 PDF 转 Word 的方法。 1、PDF365转换软件 直通车&#xff1a;www.…

模块化叙事的演变:DeFi借贷开发的模块化转型

随着区块链技术的不断发展&#xff0c;去中心化金融&#xff08;DeFi&#xff09;正经历一场深刻的变革。模块化借贷作为这一变革的重要部分&#xff0c;正逐渐成为加密金融领域的焦点。本文将探讨模块化借贷的起源、演变及其未来发展方向。 一、模块化的起源 模块化区块链的概…