HTML
2021-03-08 12:30
YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
标签：点击 水平分割 图片加载 linux 颜色 交易平台 src 化运维 targe
- HTML
- 1 HTML简介
- 2 HTML语法
- 2.1 注释方法
- 2.2 HTML文档结构
- 2.3 两种打开HTML文件的方式
- 2.4 标签的分类
- 2.4.1 分类1
- 2.4.2 分类2
- 2.4.3 分类3
- 2.5 body内常用标签及特殊语法
- 2.5.1 基本标签
- 2.5.2 特殊符号
- 2.5.3 常用标签
- 2.5.4 img标签
- 2.5.5 a标签
- 2.5.6 标签具有的两个重要属性
- 2.5.7 列表标签
HTML
1 HTML简介
HTML是超文本标记语言
如果想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
hello big baby~
click me！give you some color to see see！
HTML就是书写网页的一套标准
2 HTML语法
2.1 注释方法
# 注释:注释是代码之母
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
导航条所有的html代码
左侧菜单栏的HTMl代码
2.2 HTML文档结构
头内容
:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
体内容
:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
PS:文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
注意:
HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
2.3 两种打开HTML文件的方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
2.4 标签的分类
2.4.1 分类1
① 双标签
② 单标签(自闭合标签)
双标签
双标签
单标签(自闭合标签)
2.4.2 分类2
① 块儿级标签
② 行内标签
# 1 块儿级标签:独占一整行
例如: h1~h6, p, div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果嵌套了p标签,问题也不大,因为浏览器会自动帮你解开
(因为浏览器是直接面向用户的,不会轻易的报错,哪怕有报错,用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
例如: i u s b span
行内标签不能嵌套块儿级标签,可以嵌套行内标签
2.4.3 分类3
① 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 网页标题(浏览器的标签页上的名字)
内部用来书写css代码
内部用来书写js代码
还可以引入外部js文件
引入外部css文件
当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
网页的描述性信息
2.5 body内常用标签及特殊语法
在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
2.5.1 基本标签
我是h1
(heading标题)1～6级标题 块儿标签
加粗 (blod加粗)行内标签
斜体 (italic斜体)行内标签
下划线 (underline下划线)行内标签
删除线 (strikethrough删除线)行内标签
段落
(paragraph段落)块儿标签
换行 (Barter rabbet换行 空标签)
水平分割线 (horizontal rule水平分割线)块儿标签
2.5.2 特殊符号
空格
> 大于号
< 小于号
& &
¥ ￥
© ?
® ?商标
2.5.3 常用标签
占位块儿标签
占位行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
2.5.4 img标签
# 图片标签 image
src 可以写入
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据 (Uniform Resource Locators)
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度height和宽度width当只修改一个的时候 另外一个参数会根据图片原始的比例,等比例缩放
如果同时修改了两个参数 并且没有考虑比例的问题 那么图片就会失真(变形)
2.5.5 a标签
# 链接标签
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href内可以放的内容:
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target内写的内容:
1.a标签在当前页面完成跳转 _self (默认)
2.a标签修改为新建页面并跳转 _blank
# a标签的锚点功能
"""点击一个文本标题 页面自动跳转到标题对应的内容区域"""
顶部
hello world
中间
底部
回到中间
回到中间
2.5.6 标签具有的两个重要属性
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的属性也可以有自定义的属性
2.5.7 列表标签
-
无序列表(较常用)
unordered lists
- 第一项
- 第二项
- 第二项
- 第二项
-
有序列表(了解)
ordered lists
- 111
- 222
- 333
-
标题列表(了解)
definition lists(自定义列表)
- 标题1
- 内容1
- 标题2
- 内容2
- 标题3
- 内容3
"""
HTML是一门标记语言
在学的时候,就记每一个标签到底表示什么意思
p是什么标签
h是什么标签
"""
前端参考博客:https://www.cnblogs.com/Dominic-Ji/p/10864457.html
HTML
标签：点击 水平分割 图片加载 linux 颜色 交易平台 src 化运维 targe
原文地址：https://www.cnblogs.com/achai222/p/12872843.html