【黑马pink老师的H5/CSS课程】（二）标签与语法
视频链接：P8~P29
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动
参考链接：
HTML 元素
1.HTML语法规范
1.1 基本语法概述
- HTML 标签是由尖括号包围的关键词，例如
<html>。 - HTML 标签 通常成对出现，例如 开始标签 和 结束标签 ，当然也有单标签
</br>
1.2 标签关系
包含关系：
比如 head标签包含title标签
并列关系：
比如 head标签跟body标签并列
2.HTML 基本结构标签
写HTML网页
每个网页都有一个基本的结构标签（也叫：骨架标签），页面内容在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML标签 | 页面中最大的标签，根标签 |
<head></head> |
文档的头部 | title被包含在head中 |
<title></title> |
文档的标题 | 让网页有自己的标题 |
<body></body> |
文档的主体 | 元素包含在文档的所有内容，内容放在body里 |
HTML文档的后最必须是 .html 或 .htm
3.使用VScode
安装的看网上教程。
基本使用快捷键：
Ctrl + N 新建文件
Ctrl + S 保存文件
Ctrl + 加号键/减号键 可以放大缩小视图
原来可以在VScode的HTML文件里 输入 英文键 的 ! 就可以弄出H5的基本结构了，我之前是不知道的，但就是要换成win10自带的英文输入键比较麻烦。
显示效果：
推荐安装的插件：
上图这个插件的使用方式：右键
下面的也同样点击安装即可
结构解释
文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是高数浏览器用哪个版本来显示网页，下面的这句代码就是说要用H5版本。
- 该声明位于文档的开头部分
- 它不是HTML标签，是文档类型声明标签
lang语言种类
用来定义当前文档显示的是英文网页
当然也可以定义为zh-CN,lang的功能还可以提示浏览器是否要进行翻译选择
字符集（Character set）
定义：多个字符的集合，便于计算机能够识别和存储各种文字
在<head>标签内，可通过<meta>标签的charset属性来规定 HTML 文档 应该使用哪种字符编码。
UTF-8比较常用，当然还有GBK、GB2312等
4.HTML常用白哦去
4.1标签语义
利用标签语义在合适的地方令显示出来的内容与结构方便合理，比如小说网站。
4.2标题标签 <h1>-<h6>
当标题用，数字就对应着重要等级。
<h1>一级</h1>
<h2>二级</h2>
4.3段落和换行标签
<p>标签定义段落
<p>一级手动阀手动阀手动阀</p>
<p>二级顶顶顶撒</p>
可以看到分段了
<br />换行标签，是单标签，可以令一段文字可以另起一行。
<p>一级手动阀手动<br />阀手动阀</p>
4.4文本格式化标签
粗体、斜体或下划线
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或<b></b> |
| 倾斜 | <em></em>或<i></i> |
| 删除线 | <del></del>或<s></s> |
| 下划线 | <ins></ins>或<u></u> |
4.5 <div>和<span>标签
这两个标签无语义，是个盒子，用来装内容的
<div> 大盒子1 </div>123
<div> 大盒子2 </div>
<span>小黄</span>
<span>小白</span>
<span>小红</span>
特点：
- 标签用来布局，但是只能一行放一个大盒子
- 标签用来布局，一行可以排成一列多个小盒子
4.6 图像标签和路径
- 图像标签
单标签<img>用于定义HTML页面的图像
- 属性之间不分先后，当要放在img标签后面
- 属性采用健值对的形式，key=value
<img src = "图像URL" alt="" title="" width="" height=""/>
src是<img>标签的必须属性，用于制定图像文件的路径和文件名。
其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，当图像不能显示的时候，就显示的文字 |
| title | 文本 | 提示文本，鼠标放到图像上，就显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
- 路径
就放文件到对应文件夹，比如目录文件夹专门放HTML文件和图片文件
根目录：就是打开文件夹目录的第一级目录
路径可分为：
- 相对路径：以应用文件所在位置参考，比如图片jpg文件相对于HTML页面的位置
| 分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 无 | 图片文件位于HTML文件同一级目录，写法为<img src="图像URL" /> |
| 下一级路径 | / |
图片文件位于HTML文件下一级目录image中，写法为<img src="data:image/图片.jpg" /> |
| 上一级路径 | ../ |
图片文件位于HTML文件上一级目录，写法为<img src="../图片.jpg" /> |
- 绝对路径
目录下的绝对位置，直达目标位置，从本地的盘符开始，比如"D:\Web\img.jpg"或者网络上的绝对地址"http://www.XXXXX.com/img.jpg"
4.7超链接标签
<a>标签用于定义超链接，可以从当前的页面到另一个页面
<a href="跳转目标" target="目标窗口弹出的方式"> 文本或图像 </a>
| 属性 | 作用 |
|---|---|
| href | 指定目标的URL，必须属性 |
| target | 指定链接页面的打开方式，其中_self为默认值从当前窗口打开，_blank为在新窗口打开 |
链接分类：
- 外部链接：比如
<a href="http://www.baidu.com">百度</a> - 内部链接：就网站内部页面之间相互链接，可以自建,例
<a href = "index.html">首页</a> - 空连接：不指定明确的连接目标，
<a href = "#">首页</a> - 下载链接：需要href的地址是一个文件或压缩包，在我们点击后，浏览器自动会帮我们下载。
- 网页元素链接：在网页中的各种网页元素，比如文本、图像、表格加上超链接
- 锚点链接：点击后可以快速定位并跳导页面中的指定位置，比如以下例子
- 链接文本的href属性，设置属性值
#名字的形式，如<a href = '#two'>第2集</a> - 如果点击上一个链接，就会自动找到目标位置标签，里面添加一个id属性 = 名字，如：
<h3 id="two">XXX</h3>
4.8 注释和特殊字符
<!-- 注释的语句 --> 快捷键 ：ctrl + /
特殊字符：就是不方便直接敲出来，就用字符替换掉
【黑马pink老师的H5/CSS课程】（二）标签与语法的更多相关文章
- 【黑马pink老师的H5/CSS课程】（一）基本介绍
视频P4~P6 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 1.网页 1.1 什么是网页 网站是网页的集合,网页是构成网站的基本元素,常用html格式文件 1. ...
- 花了半年时间，我把Pink老师的HTMLCSS视频课程，整理成了10万字的Markdown笔记！
说明:本文内容真实!!!不是推广!!! 学习前端的同学应该都或多或少听说过 Pink 老师,我个人觉得 Pink 老师的前端视频教程应该说是目前B站上最好的了,没有之一! Pink老师 HTML CS ...
- 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制
大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- Javaweb 第1天 HTML和CSS课程
HTML和CSS课程 今日大纲 ● 了解Java Web开发 ● HTML常用标签 ● CSS的使用 ********************************************** ...
- 小奶狗给小喵咪上CSS课程
小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...
- css笔记 - 张鑫旭css课程笔记之 float 篇
https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...
- 前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
随机推荐
- vue3项目后台管理系统模板
Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...
- Casdoor + OAuth 实现单点登录 SSO
简介 Casdoor 是一个基于 OAuth 2.0 / OIDC 的中心化的单点登录(SSO)身份验证平台,简单来说,就是 Casdoor 可以帮你解决用户管理的难题,你无需开发用户登录.注册等与用 ...
- go 中 select 源码阅读
深入了解下 go 中的 select 前言 1.栗子一 2.栗子二 3.栗子三 看下源码实现 1.不存在 case 2.select 中仅存在一个 case 3.select 中存在两个 case,其 ...
- MATLAB地图工具箱学习心得（二）设计可变参数和位置拾取的“放大镜”式投影程序
最近刚好因为一些原因整理这方面的内容,所以还是把这篇鸽了一年多的博客顺手写出来了∠( ᐛ 」∠)＿.因为是当时课程设计的一部分,程序上难免会有一些不足和bug,在这里将设计的思路分享给大家. 本篇博客 ...
- 攻防世界-MISC：stegano
这是攻防世界新手练习区的第五题,题目如下: 点击附件1下载,得到一个pdf文件,打开后内容如下: 把pdf文件里的内容复制到记事本上,发现一串A和B的字符串,不知道是什么(真让人头大) 参考一下WP, ...
- JSP标签、JSTL标签、EL表达
JSP页面转发,附带数据 <jsp:forward page="/jsptag2.jsp"> <jsp:param name="name" v ...
- 防火墙之ipset表应用
简介 由于公司线上生产环境firewalld默认都是关闭的,所以只能依赖iptables的表来方便管理IP黑白名单. 提示线上生产环境不要随便重启iptables,会导致docker已经映射好的关系表 ...
- 那些年你啃过的ConcurrentHashMap
前言 我是fancy,一个年纪轻轻bug量就累计到3200个的程序员,同事们都夸我一个人养活了整个测试组. 最近迷上了并发编程.并发这玩意怎么说呢,就是你平时工作用不到,一用就用在面试上.这不,又卷起 ...
- spring boot 中接口参数为枚举时的反序列化配置（总结）
步骤 如果是 GET 请求中需要反序列化枚举值(即 url 中的参数[querystring]),确保以下两点 1.1. 重写 StringToEnumConverterFactory 1.2. 配置 ...
- MySQL体系结构与数据类型
layout: post title: "MySQL体系结构与数据类型" date: 2018-02-26 categories: MySQL tags: MySQL 一.MySQ ...