HTML - 1

news/2024/11/7 20:08:12/文章来源:https://www.cnblogs.com/wxrwajiez/p/18533871

HTML - 1 基础内容

标签与标签属性

属性

不区分大小写 (推荐小写)
可以用双引号也可以用单引号 (推荐双引号)
重复的属性，后边的会失效

通用属性：id: 给标签打上唯一标识 (head html meta script style title不能加)

class：指定标签类名，与样式配合

style：控制样式

dir：内容的方向 (ltr, rtl) (head html meta script style title不能加)

title：给标签一个文字提示内容 (超链接和图片用得多)

lang： (head html meta script style title不能加)

独有属性：

文档声明

放在 html 文件第一行

<!DOCTYPE html> <!-- H5 -->

作用：告诉浏览器当前网页的版本

字符编码

存储时，采用合适的字符编码 (否则数据会丢失)
存储采用哪种编码，读取就采用哪种方式解码

<!DOCTYPE html>
<html><head><meta charset = "utf-8"><title>字符编码</title></head><body></body>
</html>

设置语言

让浏览器显式对应的翻译提示
有利于搜索引擎优化

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset = "utf-8"><title>设置语言</title></head><body></body>
</html>

favicon.ico

排版标签

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset = "utf-8"><title>排版标签</title></head><body><h1>一级标题 (一个最好)</h1><h2> </h2><h3> </h3><!-- 使用较少 --><h4> </h4><h5> </h5><h6> </h6><p>段落标签</p><div>没有含义</div></body>
</html>

语义化标签

语义：含义

h1-h6: 标题

p: 段落

div: 没有语义

语义化 (标签的默认效果不重要，语义最重要)

好处：1. 代码可读性强；2. 有利于SEO；3. 方便设备解析 (屏幕阅读器、盲人阅读器)

浏览器爬虫

块级元素与行内元素

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset = "utf-8"><title>排版标签</title></head><body><!-- 块级元素 --><h1>一级标题</h1><h2> </h2><h3> </h3><h4> </h4><h5> </h5><h6> </h6><p> </p><div> </div><!-- 行内元素 --><input><span> </span></body>
</html>

块级元素中能写：行内元素、块级元素
行内元素中能写：行内元素，但不能写块级元素
h1-h6 不能互相嵌套
p 标签中不能写块元素

文本标签

用于包裹：词汇、短语
通常写在排版标签中
通常都是行内元素

<!-- 常用文本标签 -->
<em>着重阅读的内容</em>
<strong>(语气比em更强)</strong>
<span>没有语义</span><!-- 不常用文本标签 -->
<cite>作品标题</cite>
<dfn>特殊术语</dfn>
<del>删除并文本</del>
<ins>插入文本</ins>
<sub></sub>
<sup></sup>
<code></code>
<abbr title="英雄联盟">LOL</abbr>
<i>本意是 人物思想活动，现多用于呈现字体图标</i>
<address>(块级元素)</address>

图片标签

行内元素

<img width="100" src="./image.jpg" alt="">

alt 属性作用：1. 有利于SEO；2. 方便设备解析 (屏幕阅读器、盲人阅读器)；3. 图片无法显示时

width 属性：1. 单位：px；2. 调整过程中比例不变 (一般不会同时调整宽和高)

./：当前位置；../：上一级

常见图片格式

jpg：有损的压缩格式

优点：1. 支持颜色丰富；2. 占用空间小

缺点：1. 不支持透明背景；2. 不支持动态图

png：无损的压缩格式

优点：1. 支持颜色丰富；2. 支持透明背景

缺点：1. 占用空间略大；2. 不支持动态图

bmp：不进行压缩

优点：1. 支持颜色丰富；2. 保留的细节更多

缺点：1. 占用空间极大；2. 不支持透明背景；3. 不支持动态图

gif：

优点：1. 支持动态图；2. 支持简单的透明背景

缺点：1. 仅支持256种颜色

webp：专门用来在网页中呈现图片

优点：具备上诉几种格式的优点

缺点：兼容性不太好

base64：把图片进行 base64编码，变成一串文本 (直接写在 img 标签的 src 里)

适用于一些较小的图片，或需要和网页一起加载的图片(不用请求了)

超链接

行内元素
可以包裹除 <a> 以外的一切标签

<!-- 打开网页 -->
<a href="" target="_self"></a> <!-- 默认 -->
<a href="" target="_blank"></a><!-- 跳转文件 -->
<a href="./movie.mp4">电影</a> <!-- 浏览器可以直接打开的文件 = 点击查看 -->
<a href="./ys.zip">压缩</a> <!-- 浏览器不可以直接打开的文件 = 下载 -->
<!-- 下载 -->
<a href="./movie.mp4" download="下载下来的文件名">电影</a><!-- 执行js脚本 -->
<a href="javascript:alert(6);">点我弹窗</a>

锚点

<a href="#here">跳转</a>
<a name="here"></a>
<a name="here"></a> <!-- 后写的失效 --><a href="#atm">跳转</a>
<p id="atm">    </p><a href="#">回到顶部</a>
<a href="">刷新页面</a>

唤起指定应用

<a herf="tel:10086">电话</a>
<a href="mailto:123@gmail.com">邮件</a>
<a herf="sms:10086">短信</a>

列表

有序列表 Ordered List

<ol><li></li> <!-- list item -->
</ol>

无序列表 Unordered List

<ul><li></li><!-- 可以包裹其它内容 --><li><ol><li> <span>hh</span></li></ol></li>
</ul>

定义列表 Definition List

<dl><dt>术语名称</dt> <!-- definition titile --><dd>术语描述</dd> <!-- definition description -->
</dl>

表格

表格 table：

表格标题 caption；表格头部 thead；表格主体 tbody；表格脚注 tfoot

<table border="1"><caption>学生信息</caption><thead> <tr> <!-- 行 --><th>name</th> <!-- head --><th>age</th></tr></thead><tbody><tr><td>wxr</td> <!-- data --><td>21</td></tr></tbody><tfoot><tr><td></td><td>共计：1人</td></tr></tfoot>
</table>

常用属性

<table>：

<table border="1" width="500" height="500" cellspacing="0"></table>

border：>1时，只能调整表格边缘边框
width：每一列的宽度自动分配
height：会调整表格主体的高度去满足设置的 height 值
cellspacing：单元格之间的间距 (上、下、左、右)

<thead>

<table border="1" width="500" height="500" cellspacing="0"><caption>学生信息</caption><thead height="500" align="center" valign="middle"> <!-- 这里是真500，整个表>500 --> <tr> <!-- 行 --><th>name</th> <!-- head --><th>age</th></tr></thead>
</table>

align：水平方向对齐方式 (center left right)
valign：垂直方向对齐方式 (middle top bottom)

<tbody>

<table border="1" width="500" height="500" cellspacing="0"><caption>学生信息</caption><thead height="50" align="center" valign="middle">....</thead><tbody height="520" align="center" valign="middle">...</tbody>
</table>

height：thead, tbody, tfoot 加起来不足设置的500时，会把高度补给 tbody，所以，设置的高度要大表格主体才会有变化

<tfoot> 同 <tbody>

<tr> <th> <td>

<table border="1" width="500" height="500" cellspacing="0"><caption>学生信息</caption><thead height="50" align="center" valign="middle"> <tr height="50" align="center" valign="middle"><!-- 所在列全是50，所在行全是100 --><th width="50" height="100" align="right" valign="bottom">name</th> <!-- 只有这一格会右下对齐 --><th>age</th></tr></thead><tbody height="520" align="center" valign="middle"><tr><td>wxr</td><td>21</td></tr></tbody><tfoot height="50" align="center" valign="middle"><tr><td></td><td>共计：1人</td></tr></tfoot>
</table>

跨行与跨列

<table border="1"><caption>学生信息</caption><thead> <tr><th colspan="2">1-1</th><th>1-3</th></tr></thead><tbody><tr rowspan="2"><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>        </tbody>
</table>

其它标签

<br>：换行

<hr>：分割线 (有语义，只是想要一条水平线使用css)

<pre>：按原文显示

表单

网页中的交互区域

请求 -- 响应

<form action="https://www.baidu.com/s" target="_blank" method="post"><!--表单控件--><input type="text" name="wd"><button>搜索</button>
</form>

action: 交给谁处理
name: 给数据取名字
method: 默认为 get

常用表单控件

文本输入框

账户：<input type="text" name="account" value="hututu" maxlength="10">

value: 输入框默认值

密码输入框

密码：<input type="password" name="pwd" value="123" maxlength="6"> <!--value不常用-->

单选框

性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女

name (键): 划分到一组，一组里只能选一个
value (值): 传给后端的数据
checked: 默认选中

多选框

爱好：
<input type="checkbox" name="hobby" value="sing" checked>唱歌
<input type="checkbox" name="hobby" value="dance" checked>跳舞

隐藏域

<input type="hidden" name="from" value="baidu">

确认按钮

<button type="submit">确认</button>
<input type="submit" value="确认">

button 默认 submit
value 是按钮中显式的值

重置按钮

<button type="reset">重置</button>
<input type="reset" value="重置">

普通按钮：不会引起表单提交和重置的按钮

<button type="button">检测账户是否被注册</button>
<input type="button" value="检测账户是否被注册">

文本域

其它：<textarea name="other" cols="30" rows="10"></textarea>

下拉框

籍贯：
<select name="place"><option value="gz">贵州</option><option value="sd" selected>山东</option>
</select>

禁用表单控件

<input disabled type="text">

label标签

建立关联

<label for="zh">账户：</label>
<input id="zh" type="text" name="account" value="hututu" maxlength="10">

for 和 id 对应

<!--第二种方法-->
<label>密码：<input type="password" name="pwd" value="123" maxlength="6">
</label>

fieldset legend

<form action="https://www.baidu.com/s" target="_blank" method="post"><fieldset><legend>主要信息</legend><input type="text" name="wd"></fieldset><button>搜索</button>
</form>

框架标签

嵌入

<iframe src="https://www.baidu.com" width="200" height="100" frameborder="0"></iframe><a href="https://www.toutiao.com" target="container">click</a>
<iframe name="container"></iframe><form action="https://so.toutiao.com/search" target="container"></form>
<iframe name="container"></iframe>

字符实体

 : 空格 ( )

<: <

>: >

&: &

©: ©

×: ✖

÷: ➗

meta元信息

网页基本信息

<!-- 针对IE浏览器的一个兼容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对移动端的一个配置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置网页的关键字 -->
<meta name="keywords" content="购物,家电"><!-- 配置网页描述信息 -->
<meta name="description" content="这是一个购物网站"><!-- 配置搜索引擎爬虫 -->
<meta name="robots" content="noindex"><!-- 配置网页自动刷新 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com"><!---->
<meta name="author" content="wxr">
<meta name="generator" content="Visual Studio Code">

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

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

umount的时候target is busy

https://blog.csdn.net/u013409979/article/details/139867156

1.如何开始JVM调优 ——tomcat内部署war包修改TOMCAT_HOME/bin/catalina.sh文件JAVA_OPTS="-Xms512m -Xmx1024m"——linux环境下jar包启动springboot项目启动时使用nohup java -Xms512m -Xmx1024m -jar x.jar --spring.profiles.active=prod &nohup：在系统后天…

为什么编号应该从 0 开始

在常见的编程语言如 Python、Go、Java 中，序列的下标都是从 0 开始的，为什么不是从 1 开始呢？迪杰斯特拉在 1982 年的时候就思考过编号起点的问题，那个时候还没有上面这 3 门语言呢。大概思路如下：序列下标是连续的整数，首先要考虑的就是怎么用区间范围表示连续的整数，…

编写高质量代码（手撕代码）

首先上几个面试题：（真难）1. 手写函数实现数组扁平化（只减少一级嵌套）思路：function flatten(arr) {let res = [];arr.forEach((item) => {if (Array.isArray(item)) {item.forEach((e) => res.push(e));} else {res.push(item);}});return res;}console.log(flatte…

LeetCode LCR135[报数]

LeetCode LCR135[报数]题目链接 LeetCode LCR135[报数] 详情实例题解思路通过 pow 函数对10进行幂运算，来获取报数范围然后循环遍历通过 push_back 方法将数字加入到容器内代码 class Solution { public:vector<int> countNumbers(int cnt) {vector<int> iR…

语音 AI 迎来爆发期，也仍然隐藏着被低估的机会丨RTE2024 音频技术和 Voice AI 专场

在人工智能快速发展的今天，语音交互技术正经历一场革命性的变革。从语音识别到语音合成，再到端到端的语音对话系统，这一领域的创新正以前所未有的速度推进。这些进步不仅提升了技术指标，更为实时翻译、虚拟数字人、智能客服等实时互动场景带来了新的可能。本届 RTE2024 大会…

节能攻略，AUTOSAR PN局部网络管理技术！

随着整车功能的不断演进，车上各类用电设备（控制器、执行机构、感知设备等）的用电功耗越来越大，为了降低整车能耗，国内外很多OEM及Tire1都在考虑相关的机制及方案，其中PN局部网络管理机制，以其简单、灵活的特点获得众多落地应用。随着整车功能的不断演进，车上各类…

AUTOSAR解决方案 — INTEWORK-EAS-CP

INTEWORK-EAS-CP（ECU AUTOSAR Software）是经纬恒润自主研发的符合AUTOSAR标准的软件产品。解决方案涵盖了嵌入式标准软件、AUTOSAR工具链、集成服务和培训等各个方面的内容，旨在为国内的OEM和供应商提供稳定可靠、便捷易用的AUTOSAR平台。随着汽车电子技术的发展，汽…

多校A层冲刺NOIP2024模拟赛19

讲个笑话：（讨论时间） huge：（叹气）这讨论啊，就是改不了，这换了铃声了，也没…… 众人：现在是讨论时间啊。 huge：（停顿）那刚才大课间那会哇啦哇啦的…… 图书管理简要题意给定一个长度为\(n(n\le 10^4)\)的排列，求\(\sum\limits_{l=1}^n\sum\limits_{r=l}^n[r-l为…

hive基础知识分享(二)

继续学习hive的相关知识写在前面今天继续学习hive部分的知识。以下是您提供的内容转成的 Markdown 格式： Hive 相关知识 hive中不同的 count 区别select clazz,count(distinct id) as cnt,count(*) as cnt,count(1) as cnt_1,count(id) as cnt_id from students group by cl…