标签：点击 水平分割 图片加载 linux 颜色 交易平台 src 化运维 targe
HTML是超文本标记语言
如果想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
HTML就是书写网页的一套标准
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
<html>
<head>
头内容
</head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body>
体内容
</body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
PS:文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
注意:
HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
① 双标签
② 单标签(自闭合标签)
<h1></h1> 双标签
<a href="https://www.mzitu.com/"></a> 双标签
<img/> 单标签(自闭合标签)
① 块儿级标签
② 行内标签
# 1 块儿级标签:独占一整行
例如: h1~h6, p, div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果嵌套了p标签,问题也不大,因为浏览器会自动帮你解开
(因为浏览器是直接面向用户的,不会轻易的报错,哪怕有报错,用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
例如: i u s b span
行内标签不能嵌套块儿级标签,可以嵌套行内标签
① head内常用标签
② body内常用标签
tips:
在书写HTML代码的时候 , 只需要写标签名 然后tab就能自动补全
`
# 1. head内常用标签
title: 网页标题
style: 内部书写css代码
script: 内部书写js代码或引入外部js文件
link: 引入外部css文件
meta name="keywords" content=‘‘:写入搜索引擎能搜索到该网页的关键字
meta name="description" content=‘‘:写入搜索引擎搜索到该网页时显示的描述性信息
# 1. head内常用标签
<title>Title</title> 网页标题(浏览器的标签页上的名字)
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
<h1>我是h1</h1> (heading标题)1～6级标题 块儿标签
<b>加粗</b> (blod加粗)行内标签
<i>斜体</i> (italic斜体)行内标签
<u>下划线</u> (underline下划线)行内标签
<s>删除线</s> (strikethrough删除线)行内标签
<p>段落</p> (paragraph段落)块儿标签
<br> 换行 (Barter rabbet换行 空标签)
<hr> 水平分割线 (horizontal rule水平分割线)块儿标签
空格
> 大于号
< 小于号
& &
¥ ￥
© ?
® ?商标
<div>占位块儿标签</div>
<span>占位行内标签</span>
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
# 图片标签 image
<img src="" alt="">
src 可以写入
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据 (Uniform Resource Locators)
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度height和宽度width当只修改一个的时候 另外一个参数会根据图片原始的比例,等比例缩放
如果同时修改了两个参数 并且没有考虑比例的问题 那么图片就会失真(变形)
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href内可以放的内容:
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target内写的内容:
1.a标签在当前页面完成跳转 _self (默认)
2.a标签修改为新建页面并跳转 _blank
# a标签的锚点功能
"""点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的属性也可以有自定义的属性
<p id="d1" class="c1" username="jason" password="123"></p>
无序列表(较常用)
unordered lists
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
有序列表(了解)
ordered lists
<ol type="1" start="5">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
1 A I a ... 参考博客了机即可
标题列表(了解)
definition lists(自定义列表)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
"""
HTML是一门标记语言
在学的时候,就记每一个标签到底表示什么意思
p是什么标签
h是什么标签
"""
前端参考博客:https://www.cnblogs.com/Dominic-Ji/p/10864457.html
标签：点击 水平分割 图片加载 linux 颜色 交易平台 src 化运维 targe
原文地址：https://www.cnblogs.com/achai222/p/12872843.html
