【黑马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 ...
随机推荐
- 安卓记账本开发学习day8之导入外部依赖
以要使用的柱状图分析显示为例,项目文件夹最外层的build.gradle,加入下列语句 allprojects { repositories { google() jcenter() maven { ...
- AngularJS ui-router 用resolve、service预先加载数据写法，属于优化性能方面吧
AngularJS的service怎么声明此处就不再赘述,下面的例子是ui-router中使用service的实现代码 $stateProvider.state('myState', { url: & ...
- SQL语言学习-DQL条件查询
条件查询 1. where子句后跟条件 2. 运算符 * > .< .<= .>= .= .<> * BETWEEN...AND * IN( 集合) * LIKE: ...
- PyTorch 广播机制
PyTorch 广播机制 定义 PyTorch的tensor参数可以自动扩展其大小.一般的是小一点的会变大,来满足运算需求. 规则 满足一下情况的tensor是可以广播的. 至少有一个维度 两个ten ...
- 微博python爬虫weiboSpider注意事项
首先我看的weiboSpider爬虫项目教程出自https://github.com/dataabc/weiboSpider 1.这爬取的是手机端的,所以我把网址https://weibo.com的. ...
- C#使用进程调用bash，不断往bash内插入命令并执行
呃呃呃,遇到了一个非常恶心得问题,现在就是,有几十万条数据需要当作参数调用python脚本 一次一次输入命令过去缓慢,经过了多层考虑决定使用进程来解决(不知道线程怎么开启bash得) 原理非常简单,类 ...
- 墙裂推荐！一款 VM 大规模集群管理工具
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ Google 发布了基础设施管理工具 VM Manager,可自动维护大型Compute En ...
- C#/VB.NET 在Excel单元格中应用多种字体格式
在Excel中,可对单元格中的字符串设置多种不同样式,通常只需要获取到单元格直接设置样式即可,该方法设置的样式会应用于该单元格中的所有字符.如果需要对单元格中某些字符设置样式,则可以参考本文中的方法. ...
- vue - Vue脚手架/TodoList案例
今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流程倒是基本上没什么问题了,主要是很多vue ...
- deepin安装jdk配置环境
下载一个jdk压缩包https://download.oracle.com/java/18/latest/jdk-18_linux-x64_bin.tar.gz 这个包,不用安装,下下来,直接解压,然 ...