50.前端学习02——HTML
2021-03-08 15:26
YPE html>
标签：blank center 安全 width container color 直接 兼容 get请求
一、HTML简介
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm
了解一门语言，先了解这门语言的注释，HTML中的注释如下
# 注释:注释是代码之母 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找 导航条所有的html代码 左侧菜单栏的HTMl代码
二、HTML文档结构
DOCTYPE html>
html lang="zh-CN">
head>
meta charset="UTF-8">
title>css样式优先级title>
head>
body>
body>
html>
- 声明为HTML5文档。
- 、是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
- 、定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
-
、 定义了网页标题，在浏览器标题栏显示。 - 、之间的文本是可见的网页主体内容。
三、两种打开HTML文件的方法
-
找到文件所在的位置右键选择浏览器打开
-
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
四、HTML标签之head内常用标签
| 标签 | 意义 |
|---|---|
| 定义网页标题 | |
| 定义内部样式表 | |
| 定义JS代码或引入外部JS文件 | |
| 引入外部样式表文件或网站图标 | |
| 定义网页原信息 |
Meta标签
Meta标签介绍：
- 元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档的头部，不包含任何内容。
- 提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
meta http-equiv="content-Type" charset=UTF8">
meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
五、HTML标签之body内常用标签
1.常用标签
h1>我是h1h1> 标题标签 1～6级标题
b>加粗b>
i>斜体i>
u>下划线u>
s>删除线s>
p>段落p>
br> 换行
hr> 水平分割线
2.块级标签div和行内标签span
# 1 块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签
3.特殊符号
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
4.img标签
# 图片标签 img src="" alt=""> src 1.图片的路径 可以是本地的也可以是网上的 2.url 自动朝该url发送get请求获取数据 alt="这是我的前女友" 当图片加载不出来的时候 给图片的描述性信息 title="新垣结衣" 当鼠标悬浮到图片上之后 自动展示的提示信息 height="800px" width="" 高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放 如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
5.a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
a href="http://www.oldboyedu.com" target="_blank" >点我a>
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href=""）
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
六、列表标签
1.无序列表
ul>
li>第一项li>
li>第二项li>
li>第二项li>
li>第二项li>
ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
2.有序列表
ol type="1" start="5">
li>111li>
li>222li>
li>333li>
ol>
3.标题列表
dl>
dt>标题1dt>
dd>内容1dd>
dt>标题2dt>
dd>内容2dd>
dt>标题3dt>
dd>内容3dd>
dl>
50.前端学习02——HTML
标签：blank center 安全 width container color 直接 兼容 get请求
原文地址：https://www.cnblogs.com/heirenxilou/p/12872906.html