视频链接：P8~P29

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动

参考链接：

HTML 元素

1.HTML语法规范

1.1 基本语法概述

  1. HTML 标签是由尖括号包围的关键词，例如<html>。
  2. 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>

特点：

  1. 标签用来布局，但是只能一行放一个大盒子
  2. 标签用来布局，一行可以排成一列多个小盒子

4.6 图像标签和路径

  1. 图像标签

    单标签<img>用于定义HTML页面的图像
  • 属性之间不分先后，当要放在img标签后面
  • 属性采用健值对的形式，key=value
<img src = "图像URL" alt="" title="" width="" height=""/>

src是<img>标签的必须属性，用于制定图像文件的路径和文件名。

其他属性：

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，当图像不能显示的时候，就显示的文字
title 文本 提示文本，鼠标放到图像上，就显示文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细
  1. 路径

    就放文件到对应文件夹，比如目录文件夹专门放HTML文件和图片文件

根目录：就是打开文件夹目录的第一级目录

路径可分为：

  1. 相对路径：以应用文件所在位置参考，比如图片jpg文件相对于HTML页面的位置
分类 符号 说明
同一级路径 无 图片文件位于HTML文件同一级目录，写法为<img src="图像URL" />
下一级路径 / 图片文件位于HTML文件下一级目录image中，写法为<img src="data:image/图片.jpg" />
上一级路径 ../ 图片文件位于HTML文件上一级目录，写法为<img src="../图片.jpg" />
  1. 绝对路径

    目录下的绝对位置，直达目标位置，从本地的盘符开始，比如"D:\Web\img.jpg"或者网络上的绝对地址"http://www.XXXXX.com/img.jpg"

4.7超链接标签

<a>标签用于定义超链接，可以从当前的页面到另一个页面

<a href="跳转目标" target="目标窗口弹出的方式"> 文本或图像 </a>
属性 作用
href 指定目标的URL，必须属性
target 指定链接页面的打开方式，其中_self为默认值从当前窗口打开，_blank为在新窗口打开

链接分类：

  1. 外部链接：比如<a href="http://www.baidu.com">百度</a>
  2. 内部链接：就网站内部页面之间相互链接，可以自建,例<a href = "index.html">首页</a>
  3. 空连接：不指定明确的连接目标，<a href = "#">首页</a>
  4. 下载链接：需要href的地址是一个文件或压缩包，在我们点击后，浏览器自动会帮我们下载。
  5. 网页元素链接：在网页中的各种网页元素，比如文本、图像、表格加上超链接
  6. 锚点链接：点击后可以快速定位并跳导页面中的指定位置，比如以下例子
  • 链接文本的href属性，设置属性值#名字的形式，如<a href = '#two'>第2集</a>
  • 如果点击上一个链接，就会自动找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">XXX</h3>

4.8 注释和特殊字符

<!-- 注释的语句 -->  快捷键 ：ctrl + /

特殊字符：就是不方便直接敲出来，就用字符替换掉

【黑马pink老师的H5/CSS课程】（二）标签与语法的更多相关文章

  1. 【黑马pink老师的H5/CSS课程】（一）基本介绍

    视频P4~P6 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 1.网页 1.1 什么是网页 网站是网页的集合,网页是构成网站的基本元素,常用html格式文件 1. ...

  2. 花了半年时间，我把Pink老师的HTMLCSS视频课程，整理成了10万字的Markdown笔记！

    说明:本文内容真实!!!不是推广!!! 学习前端的同学应该都或多或少听说过 Pink 老师,我个人觉得 Pink 老师的前端视频教程应该说是目前B站上最好的了,没有之一! Pink老师 HTML CS ...

  3. 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制

    大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...

  4. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  5. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  6. Javaweb 第1天 HTML和CSS课程

    HTML和CSS课程 今日大纲 ● 了解Java    Web开发 ● HTML常用标签 ● CSS的使用 ********************************************** ...

  7. 小奶狗给小喵咪上CSS课程

    小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...

  8. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  9. 前端开发之CSS篇二

    主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣  CSS的继承性和层叠性 1 ...

随机推荐

  1. Vue踩坑1——驼峰命名

    使用自定义Vue组件的时候,其他个方面都正常,但是浏览器就是显示不出自定义标签里的内容 <!DOCTYPE html> <html lang="en"> & ...

  2. Codeforces Round #677 (Div. 3) D. Districts Connection思维1200

    题目链接 Problem - 1433D - Codeforces 题目 美好的一天,从看不懂题目开始~~ Example input 4 5 1 2 2 1 3 3 1 1 1 4 1 1000 1 ...

  3. 忘带U盘了？？别急！一行python代码即可搞定文件传输

    近日发现了python一个很有趣的功能,今天在这里给大伙儿做一下分享 需求前提 1.想要拷贝电脑的文件到另一台电脑但是又没有U盘2.手机上想获取到存储在电脑的文件3.忘带U盘- 您也太丢三落四了吧,但 ...

  4. keepalived安装及配置文件详解

    一个执着于技术的公众号 在上一篇文章中,我们对Keepalived进行了简单入门学习: Keepalived入门学习 今天我们继续学习Keepalived服务. 一.安装Keepalived服务 两种 ...

  5. 简单易懂的 Go 泛型使用和实现原理介绍

    原文:A gentle introduction to generics in Go by Dominik Braun 万俊峰Kevin:我看了觉得文章非常简单易懂,就征求了作者同意,翻译出来给大家分 ...

  6. 异步加载数据——turn.js

    var tostore = GetQueryString("tostore"); var photo_id = GetQueryString("photo_id" ...

  7. hibernate + hsqldb单元测试

    1.测试环境连接hsqldb,使用hibernate的自动建表功能. 1 <bean id="sessionFactory" 2 class="org.spring ...

  8. Sentinel Dashboard 规则 持久化到Nacos

    本篇文章基于sentinel1.8.4版本进行改造的.本篇主要记录改造步骤 1.下载源码 https://github.com/alibaba/Sentinel 2.打开下载的sentinel,到se ...

  9. ElasticSearch7.3学习(二十六)----搜索（Search）参数总结、结果跳跃（bouncing results）问题解析

    1.preference 首先引入一个bouncing results问题,两个document排序,field值相同:不同的shard上,可能排序不同:每次请求轮询打到不同的replica shar ...

  10. Mac-Typora快捷键

    标题(大钢) command+(1-6)) 如:command+1,设置为一级标题 引用 快捷键:command+option+Q 或者:先">",后面直接加内容 二级引用: ...