前端之HTML
时间:2019-12-03
本文章向大家介绍前端之HTML,主要包括前端之HTML使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、初识HTML
1、概念
-
前端就是我们看到的页面
- 前端的3板斧-----HTML(一个赤裸的人)、Css(给人穿的衣服)、JS/JavaScript(赋予人行动能力)
-
HTML是一套能够被浏览器所识别的规则
-
学习html 实际就是学习能够被浏览器所识别的一套规则
<!--<xxx></xxx>> 一对标签--> <!--标签中可以定义属性 lang 代表下方要求按照英文进行解释--> <html lang="en"> <!--head相当于人的头部--> <head> <!-- 在head中大部分是不能够在页面看到的--> <!-- 字符集 --> <meta charset="UTF-8"><!-- 自闭和标签【可以理解为是单身狗】--> <!-- 浏览器tab上的标题--> <title>Title</title> <!-- 主动闭合标签【可以理解为有对象】--> </head> <!--body相当于人的身体--> <body> </body> </html>
tab标签名:
<!DOCTYPE html> <!--<xxx></xxx>> 一对标签--> > <html lang="en"> <head> <meta charset="UTF-8"> <!-- 浏览器tab上的标题--> <title>摩羯座</title> </head> > <body> </body> </html>
跳转:
<a href="http://www.xxxxxxx.com" target="_blank">跳转到某某</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com" target="_blank">跳转到百度</a> </body> </html>
二、标签
1、标签类别
(1)主动闭合标签【好比是有对象】
- 由两部分对称的标签组成
<title>摩羯座</title> <!--主动闭合标签-->
(2)自闭和标签【好比是单身狗,没有对象】
- 标签不对称,只有一个
<meta charset="UTF-8"> <!--自闭和标签-->
三、标签属性
- 标签中存在属性
- 有标签自带属性和自定义属性两种属性
- 一个标签中可以同时拥有多个属性
在标签后空格,pycharm即显示标签的自带属性:
1、标签属性类别
(1)自带属性
(2)自定义属性
2、自带属性具体应用
1)meta标签自带属性:
(1)打开页面1秒后刷新
<meta http-equiv="refresh" content="1"> <!--打开页面1秒后刷新-->
看到小图标一直在闪,说明语句实现了:
(2)关键字检索
<meta name="keywords" content="自动化测试">
该语句应用场景:在百度搜索“自动化测试”,会通过keywords关键字进行爬虫查找,获取到信息,搜索顺序可能根据广告费排序。
四、head具体应用
1、浏览器tab页title的图标
原文地址:https://www.cnblogs.com/brf-test/p/11979968.html
- 学习docker on windows (1): 为什么要使用docker
- 使用VS Code开发asp.net core (下)
- 使用VS Code开发asp.net core (上)
- 小程序开发总结
- Silverlight Load Client Image 加载客户端图片
- 使用xUnit为.net core程序进行单元测试(4)
- 使用xUnit为.net core程序进行单元测试(3)
- 使用xUnit为.net core程序进行单元测试(2)
- 使用xUnit为.net core程序进行单元测试(1)
- 用 Identity Server 4 (JWKS 端点和 RS256 算法) 来保护 Python web api
- asp.net core 2.0 查缺补漏
- SQL Server 性能优化之——T-SQL NOT IN 和 NOT Exists
- SQL Server 性能优化之——重复索引
- SQL Server 性能优化之——系统化方法提高性能
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例