视频链接：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. Java学习day12

    Set集合特点:不能包含重复的元素:没有所有的方法,不能通过普通的for循环遍历集合 哈希值是JDK根据对象的地址或者字符串或者数字算出来的int类型的数值,同一个对象多次调用hashCode()方法 ...

  2. css 实现输入效果

    <template>   <h1>Pure CSS Typing animation.</h1> </template> <script> ...

  3. Codeforces Round #767 (Div. 2) c d, 巧妙标记

    贪心: Problem - C - Codeforces 思维: Problem - D - Codeforces 这两个题不错, 第一个需要考虑后面,就先标记完, 从前遍历挨个除去标记 第二个需要考 ...

  4. 公私钥 SSH 数字证书

    公私钥 SSH 数字证书 小菜鸟今天买了华为云一台服务器,在使用公私钥远程登录服务器的时候,忘记了相关公钥私钥的原理和一些应用了,今天复习一波做个记录. 相关概念 公钥:公钥用来给数据加密,用公钥加密 ...

  5. Vue_基础功能循环、计算、绑定、事件处理、组件

    1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xht ...

  6. Win10搭建Jenkins部署Java项目（本机和远程Win10部署）

    目录 一.前言&背景 二.环境准备 三.插件安装 四.全局配置 Maven JDK Git Maven 五.新建项目并配置 新建项目 配置 1.Discard old builds 2.Thi ...

  7. 一文看懂：网址，URL，域名，IP地址，DNS，域名解析

    一个执着于技术的公众号 前言 今天给大家梳理一篇关于网址.URL.IP地址.域名.DNS.域名解析的白话长文,并以简单的提问-解答 形式让读者更加深刻理解,希望有助于读者的学习,面试和工作! 1.一个 ...

  8. vue - Vue脚手架（终结篇）/ vue动画

    几天的内容不是很多,因为我们脚手架的学习告一段落了,也是为了跟明天开始的内容有一个区分. 明天将会有一个非常重要的内容来了,各位,vue中的ajax他来了,这个绝对是重量级,有点兴奋! 十一.TODO ...

  9. nodejs + koa + typescript 集成和自动重启

    版本说明 Node.js: 16.13.1 全局安装 TypeScript yarn global add typescript 创建项目 创建如下目录结构 project ├── src │ └── ...

  10. 一起看 I/O | Flutter 休闲游戏工具包发布

    作者 / Zoey Fan, Product Manager for Flutter, Google 对于大多数开发者来说,Flutter 是一个应用框架.但利用 Flutter 提供的硬件加速图形支 ...