java之学习记录 3 - 1 - html部分标签记录_left.html right.html top.html-CSDN博客

本文链接：https://blog.csdn.net/dear_zx/article/details/111247129

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language) 专门制作网页的计算机语言普通的文本就是英文单词，英文字母一样的存在。超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。

比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的。
字母img只是普通的字母，没什么特殊的含义。而被加上尖括号后，在网页的世界中，就具备了显示图片的作用。

文件标签：

标签名	含义
<html></html>	代表当前书写的是一个HTML文档
<head></head>	存储的本页面的一些重要的信息，它不会显示 head标签中有一个子标签<title> 用于定义页面的标题
<body></body>	书写的内容会显示出来内置部分属性： 1. text 用于设置文字颜色 2. bgcolor 用于设置页面的背景色 3. background 用于设置页面的背景图片

hr属性：

属性名	含义
align	可取值有left right center 代表水平线位置
size	代表水平线厚度（粗细）
width	代表水平线宽度
color	水平线的颜色

格式化标签：

标签名	含义
<b></b>	字体加粗
<i></i>	字体倾斜
<del></del>	~~字体删除线~~
<u></u>	字体下划线

有序列表：

从数字2开始排序
<ol start="2">
  <li>辣子鸡丁</li>
  <li>打卤面</li>
  <li>山西油泼面</li>
  <li>锅包肉</li>
</ol>
字母排序
<ol type="A">
  <li>辣子鸡丁</li>
  <li>打卤面</li>
  <li>山西油泼面</li>
  <li>锅包肉</li>
</ol>

属性名	含义
type='A'	字母排序
type='I'	罗马排序
start='3'	序列从设定的数字开始排序

无序列表：

<ul type="circle">
    <li>西红柿鸡蛋</li>
    <li>西红柿鸡蛋</li>
    <li>西红柿鸡蛋</li>
</ul>

属性名	含义
type="disc"	默认，实心圆
type="square"	方块
type="circle"	空心圆

图像标签：<img />

src	代表的图片的路径
width	图片的宽度
height	图片的高度
border	用于设置图片的边框
alt	如果图片不可以显示时，默认显示的文本信息
title	鼠标悬停图片上，默认显示的文本信息
align	图片附件文字的对齐方式，可取值有： left：把图像对齐到左边 right：把图像对齐到右边 middle：把图像与中央对齐 top：把图像与顶部对齐 bottom：把图像与底部对齐（默认）

超连接标签

href

代表的我们要跳转的路径

target

这个属性规定在何处打开这个链接文档，可取值：

_ blank 在新窗口中打开页面

_ self 默认。在本窗口打开页面

框架标签：

通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。

注意，框架标签和body标签不共存。“有你没我，有我没你”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

    <frameset rows="10%,*,13%">

        <frame src="top.html"></frame>
        <frameset cols="15%,*">
            <frame src="left.html"></frame>
            <frame src="right.html"></frame>
        </frameset>
        <frame src="foot.html"></frame>

    </frameset>

</html>

top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <h1> &hearts; 顶部导航&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区域</h1>
</body>
</html>

<meta>标签:

<meta>标签必须写在<head>标签之间.

当前页面的字符编码 gbk：中文简体
<meta charset="UTF-8">

这里的名字是viewport （显示窗口）
数据 是 文本 内容 content="width=device-width, initial-scale=1.0"
也就是 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是
1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0">

每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版
本都以当前版本所支持的最高级标准模式渲染
<meta http-equiv="X-UA-Compatible" content="ie=edge">

通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面
<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。

特殊字符：

符号	编码	说明	符号	编码	说明	符号	编码	说明
“	"	双引号	`×`	×	乘号	`←`	←	向左箭头
&	&	AND符号	`÷`	÷	除号	`↑`	↑	向上箭头
<	<	小于符号	`±`	±	正负符号	`→`	→	向右箭头
>	>	大于符号	`ƒ`	&fnof;	function符号	`↓`	↓	向下箭头
		空格	`√`	√	根号	`↔`	↔	双向箭头
¿	¿	倒问号	`∞`	∞	无限大符号	`⇐`	⇐	双线向左箭头
«	«	双左箭头	`∠`	&ang;	角度符号	`⇑`	&uArr;	双线向上箭头
»	»	双右箭头	`∫`	∫	微积分符号	`⇒`	⇒	双线向右箭头
‘	‘	左单引号	`°`	°	度数符号	`⇓`	&dArr;	双线向下箭头
’	’	右单引号	`≠`	≠	不等于符号	`⇔`	⇔	双线双向箭头
“	“	左双引号	`≡`	&equiv;	相等符号	`♠`	&spades;	黑桃符号
”	”	右双引号	`≤`	≤	小于等于符号	`♣`	&clubs;	梅花符号
¶	¶	段落符号	`≥`	≥	大于等于符号	`♥`	&hearts;	红心符号
§	§	章节符号	`⊥`	&perp;	垂直符号	`♦`	&diams;	方块符号
©	©	版权所有符号	`½`	½	二分之一符号	`α`	α	Alpha符号
®	®	注册商标符号	`¼`	¼	四分之一符号	`β`	β	Beta符号
™	™	商标符号	`¾`	¾	四分之三符号	`γ`	γ	Gamma符号
€	€	欧元符号	`‰`	&permil;	百分符号	`Δ`	Δ	Delta符号
¢	¢	美分符号	`∴`	&there4;	所以符号	`θ`	θ	Theta符号
£	£	英镑符号	π	π	圆周率符号	`λ`	λ	Lambda符号
¥	¥	日圆符号	`¹`	¹	批注1符号	`Σ`	Σ	Sigma符号
…	…	...	`²`	²	批注2符号、平方	`Τ`	Τ	Tau符号
`⊕`	&oplus;		`³`	³	批注3符号、立方	`ω`	ω	Omega符号
`∇`	∇	倒三角型符号	`↵`	&crarr;	ENTER符号回车	`Ω`	Ω	Omega符号、奥姆符号

HTML5特性：

大小写不敏感
- 标签
- 属性
- 属性的值
引号可省略
省略结尾标签

<inPUT tYPe="pasSWord"/>

<input type="password">
<input type=password>

<p>哈哈哈哈哈哈哈
<p>哈哈哈哈哈哈哈

说是省略，其实运行起来，查看源代码，html是自动帮我们补全了

新增语义化标签：html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此新增许多语义化标签，让div“见名知意”
- section标签：表示页面中的内容区域，部分，页面的主体部分
- article标签：文章 aside标签：文章内容之外的，标题
- header标签：头部，页眉，页面的顶部
- hgroup标签：内容与标题的组合
- nav标签：导航
- figure标签：图文并茂
- foot：页脚，页面的底部
媒体标签：<video>
- src：媒体资源文件的位置
- controls：控制面板
- autoplay：自动播放（谷歌失效，360浏览器可以）
- loop：循环播放

<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

新增表单控件
<input>，修改type属性：
- color：调色板
- date：日历
- month：月历
- week：周历
- number：数值域
  - min：最小值（默认值是1）
  - max：最大值（默认值无上限）
  - step：递增量
- range：滑块
- search：搜索框（带×号，可一键删除框中内容）
进度条<progress />
高亮<mark>
联想输入框 <datalist>（模糊查询）
- 选项<option>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <h2>H5 <mark>新增</mark>的表单元素</h2>

    <input list="citys">
    <datalist id="citys">
        <option value="北京"></option>
        <option value="南京"></option>
        <option value="重庆"></option>
    </datalist>

    <form action="">
        <input type="color">
        <br>
        <input type="date">
        <br>
        <input type="month">
        <br>
        <input type="week">
        <br>
        <input type="number" min="10" max="20" step="2">
        <br>
        <input type="range">
        <br>
        <input type="search">
        <br>
        <progress></progress>
    </form>

</body>
</html>