Part 1 · HTML5-01-HTML网页开发、CSS基础语法

兜兜儿

Part 1 · HTML5 网页开发-01

第一章、HTML网页开发、CSS基础语法

第一节、HTML基础

1、初识前端开发

前端开发是什么？

前端开发是创建pc页面或者APP页面凡是能让用户看得见的页面，把页面呈现给用户

核心技术：HTML、CSS、JavaScript，以及一些框架等等

前端三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）

2、需要掌握的基础知识点

HTML：HTML语法、HTML语义化、SEO基础
CSS：CSS语法、页面布局、媒体查询、CSS3
JavaScript：JavaScript基础语法、（基础的数据结构、WEB APIs、ES6+、模块化、TypeScript）

3、HTML概述

HTML（hypertext Markup language）超文本标记语言，用来搭建网页结构的

4、互联网访问原理

http（hypertext transfer protocol）超文本传输协议，是客户端浏览器或者其他程序与web服务器之间的应用层通讯协议。

用户向服务器发送http请求，访问网站
服务器响应http请求，根据请求响应一个html文件，将HTML传输给客户端

5、纯文本格式，富文本格式

纯文本格式：最常见的是.txt文件，就是只能保存文本，不能保存其他格式

HTML、CSS、JS文件都是纯文本格式文件

富文本格式：常见的是.rtf文件、.doc文件，除了能保存文本，还能保存图片等

6、THML基本概念

HTML HyperText Markup Language超文本标记语言（从语义化的角度搭建网页结构） HTML是纯文本文件

7-9、HTML标签语法+元素+属性

标签语法：双标签必须成对出现，结束标签必须加关闭符，单标签必须加关闭符 / ，（在HTML5中，单标签可以不写关闭符）
元素：HTML元素是从开始标签到结束标签的所有内容包括（开始标签+元素内容+结束标签）

容器级标签：可以放任意内容，包含容器级标签都可以放
文本级标签：只能放文字或类似文字的内容，比如图片、表单元素等

属性：html中标签的属性，属性名（key）属性值（Value）

10-12、DTD+命名空间+字符集

DTD：DocType Definition 文档声明类型
命名空间：遵循w3school
字符集常用UTF-8，包含最多文字的字符集

13、注释

Ctrl+/ 快捷注释

14-17、HTML常用标签

标题标签 <h1> <h2> <h3> <h4> <h5> <h6>
段落标签 <p>
换行标签 <br/> 单标签

18、相对路径

相对路径从html本身出发，包含3个方向 ( / 是关闭符号）

同级查找（目标文件和html属于同一级），直接文件名+后缀

例： <img src="tupian.jpg"/>

子级查找（目标文件在html同级的文件夹内），需要先找到文件名，再找到文件

例： img src="image/tupian.jpg/

上级查找（目标文件在html母文件夹之外的文件），需要先跳出母文件夹，用 ../ 跳出，如果跳出多级，就多写几个../

例: <img src="../../imagetupian.jpg/>

19、绝对路径

绝对路径绝对路径不需要从HTML文件出发，是直接从电脑硬盘查找或者使用网址查找，路径是固定的

从盘符出发，查看路径（缺点，只有在本人的电脑能生效，换台电脑就无法查找。中文的路径容易出错）
网络图片，查看路径

实际工作中: ==建议多使用相对路径，可以适当使用网址形式的绝对路径==

注意: 使用相对路径必须将图片或者文件与HTML同时上传，且保持相对路径位置不变

20、HTML中的常用标签`<img>`

<img>的属性

width 属性 <img src="../images/5.jpg" width="100"/>
heigth属性 <img src="../images/5.jpg" height="200"/>
border边框属性 <img src="../images/5.jpg" height="300" border="20"/>
title鼠标点击提示属性 <img src="../images/5.jpg" height="300" title="点击查看源文件"/> 加提示属性，可以提高用户体验
alt替换文本属性
（图片查看失败的情况，做替换使用，如果查看到图片，就不显示）提高用户体验 <img src="../images/15.jpg" height="200" alt="这是一个微笑的图片"/> 实际工作中 ==src 和alt 在<img>里面是很重要的==

21、HTML中的常用标签`<audio>`

音频audio标签（双标签）,需要添加控制台，control属性 <audio src="#" control="control"></audio>

22、HTML中的常用标签`<a>`

<a>标签，a称anchor，中文意思“锚”，超级链接的含义 <a>为双标签作用：在指定的位置添加超级链接 <a>标签常用的属性:

href属性全称hypertext reference, 超文本引用，规定链接目的地址
target属性用于网页跳转是否打开新页面 target_self 点击超链接，在当前页面跳转，不打开新的页面 target_blank 点击超链接，跳转到新的页面展示
title属性，用法和<img>标签里面的title用法一样（鼠标点击提示），提高用户体验

23、锚点跳转

锚点<a>跳转 一、内面内的点对点跳转

设置目的地锚点（页面内部点对点跳转，需要给目的地设置锚点）设置方法:

在需要设置锚点的标签内加 id="###" 例：<h2 id="##">锚点位置</h2>（id命名在整个页面具有唯一识别性）
在需要设置锚点的标签上加<a name="##" ></a>空标签,（同样，name命名具有唯一性）例：<a name="##" ><h2>此标签需要加锚点</h2></a>

添加出发地锚点链接（添加页面内部锚点链接）

在需要加链接的位置设置<a>标签，给<a>的href设置属性值为 #id名或name名，用#开头例:<a href="#id名或name名">跳转到锚点位置</a>

二、跨页面的点对点跳转

设置目的地锚点设置方法:

跨页面跳转设置锚点，和页面内跳转一样的设置

添加出发地锚点链接

链接到锚点，添加href属性值，要先找到对应的页面，属性值写成 “页面#id&name” 例: <a href="同级页面.html# id名或name名>跳转到另外锚点位置<a/>

例：<a href="../../非同级页面.html# id名或name名>跳转到另外锚点位置<a/> 注：同级页面直接写文本名，非同级页面要跳级查找，根据实际情况，添加多少个../

24、HTML中的常用标签`<ul>`

HTML 无序列表

ul : unordered list 定义无序列表大结构
li : list item 列表项，定义无序列表内的某一项 <ul>与<li>为嵌套关系，书写快捷键ul>li
注：<li>不能脱离<ul>单独写，但是<li>内部可以添加各种标签，包括<ul>标签, <li>是容器标签

例：

<ul>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
  </ul>

25、HTML中的常用标签`<ol>`

HTML有序列表

ol : ordered list 定义一个有序列表的大结构，书写快捷键ol>li
li : list item 列表项，定义无序列表内的某一项 <ol><li>和无序列表一样，嵌套关系例：

   <ol>
      <li>
      </li>
   </ol>

26、HTML中的常用标签`<dl>`

定义列表

dl : definition list ,定义一个自定义列表的大结构
dt : definition term,定义自定义列表中的一个主题
dd : definition description ,定义解释项，描述解释dd <dl></dl> <td></td> <dd></dd> 和有序列表无序列表一样，嵌套关系，<td></td> <dd></dd>为同级

例：

   <dl>
      <dt></dt>
      <dd></dd>
   </dl>

27、HTML中的常用标签`<div>`

div : division ,布局标签,分割、区域、跨度作用：划分网页区域，结构布局
span : 小区域，小跨度，容器标签 <div>和<span>是盒子标签，容器标签，内部可以放任意内容，没有明确的语义，后期H5的布局标签更多，语义会更多 div划大区域，span在大区里面划小区

28、HTML中的常用标签`<table>`

表格标签<table>

table : 表格定义整个表格大结构
tr : table rows 表格的行
td : table data 表格数据
th : table headdate 表头三者为嵌套关系

例：

<table>
   <th>表头</th>
   <tr>
    <td>数据</td>
   </tr>
</table>

29、合并单元格

合并单元格通过<th> <td>的两个属性进行设置

左右跨列合并：属性 colspan （合并列）
上下跨行合并：属性 rowspan （合并行） cols指的是列，rows指的是行 colspan 是跨几列 rowspan 是跨几行

30、表格分区

表格分区完整的表格<table>内部包含4个分区标签（标题，头部，主题，页脚）

caption: 表格标题
tabel head ：thead 表格头部
tabel body : tbody 表格主体
tabel foot : tfoot 表格页脚注:书写中，不论先后顺序，浏览器会按照默认顺序加载

31、表单

表单（表单域、提示信息、表单控件）

表单域：容器，容纳提示信息+表单控件
提示信息：提示表单控件里面应该填写什么信息
表单控件：用来装输入内容的

32、HTML中常用标签`<form>`

表单域标签功能性标签（填写的表单信息想正确的提交到后台服务器就必须放在<form>标签内），双标签，容器标签
表单域标签属性

属性名	属性值	描述
cation	url	制定接收+处理表单的url地址
method	get/post	设置表单提交方式
name	自己定义	规定表单的名字

33-34-35、HTML中常用标签`<input>`

表单域内的输入<input>标签 <input>是单标签，（==所有单标签都只能通过标签属性来实现各种功能==）注 :表单元素不能自动换行，所以需要加其他标签来换行如<p><br/>
<input>标签常用属性

属性名	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选
type	checkbox	复选框
type	button	普通按钮
type	reset	重置按钮
type	submit	提交按钮
type	image	图像形式按钮
type	file	定义输入字段和“浏览”按钮，提供文件上传
name	自定义	定义控件的名称
value	自定义	定义控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义选框控件的默认被选中项
maxlength	数字	定义允许输入的最多字符数

书写规则：

例：文本框+密码框单行文本输入框：用户名 <input type="text"> 密码输入框：密码 <input type="password">
例：单选框+复选框选择性别： <input type="radio" name="w">男 <input type="radio" name="w">女 选择兴趣： <input type="checkbox">游泳 <input type="checkbox">跳舞 <input type="checkbox">阅读

36、HTML中常用标签`<textarea>`

表单域内的文本域<textarea> 例：写一个30列，10行的文本域 <textarea name="#" id="#" cols="30" rows="10">自我介绍</textarea>

37、HTML中常用标签`<select>`

表单域内的下拉菜单 <select>内嵌套<option> 若要加选项组，<optgroup> 写法：<select>内嵌套<optgroup>，<optgroup>内嵌套<option>

例：

  <select>
    <optgroup label="中国">
        <option value="#">重庆</option>
        <option value="#">川东</option>
        <option value="#">上海</option>
        <option value="#" selected="selected">北京</option>
    </optgroup>
    <optgroup label="英国">
        <option value="#">爱丁堡</option>
        <option value="#">丹迪</option>
        <option value="#">斯特林</option>
        <option value="#">剑桥</option>
    </optgroup>  
  </select>

38、HTML中常用标签`<label>`

表单域的<label>标签 <label>标签的作用：帮助表单元素定义标注（标记），用于选项中，鼠标放在选择框附近可以选选择到该选项书写方法：

方法1：先定义id值，再for=id值例： <input type="checkbox" id="e"> <label for="e" >绘画</label>
方法2：<label>标签包含选择标签例： <label> <option value="#">重庆</option></label>

第二节、CSS基础

1、CSS概念

CSS概念 css（cascading style sheets）层叠样式表，从美观的角度描述页面样式
CSS书写规则：由两个部分组成：选择器+一条或多条声明

2-3-4-5、CSS的样式表

书写方式根据书写位置不同，CSS有四种书写方式：内联式、内嵌式、导入式、外联式

内联式：写在html标签里面的<style>标签内样式，（缺点：代码量太大，也影响html内标签的语义，实际工作中，不会用到这种写法）
内嵌式：写在<head>标签内部，<title>之下（缺点依然是代码多），包裹在<style>标签内例：<style type="text/css"> 小型项目可以用
外联式：写在一个单独的扩展名为.css的文件中，在.css文件书写中，不需要再加<style>标签，大型项目推荐使用 注：外联式要引用在html文件中才能加载出来，引入方式：在html中的<head>标签内部使用<link>标签引用 <link>标签的属性:

属性名	属性值
rel	"stylesheet"
href	css文件路径
type	"text/css”

导入式：作用与外联式基本相似，书写方法：@input url(.css文件的路径) ，实际工作中用得少

6-7、CSS样式规则语法和书写风格

CSS样式规则语法由两个部分组成：选择器+一条或多条声明选择器（html中需要更改样式的标签元素名）加上 {K:V；} K（属性名）V（属性值）例： tb{color:red;}
书写风格

分行排版，样式清晰,美观，易于维护
全部放在一排，紧凑型（上传服务器的时候可以这样，这种写法占空间小，上传速度快些）

8-9-10、CSS常用属性

CSS常用属性

颜色属性color，有三种颜色格式（1、十六进制 2、英文式 3、rgb式）
字体样式属性font-family 首选字体根据设计图来，因为每个人电脑字体库里面的字体集有差别，所以需要加备用字体，通常是宋体或微软雅黑提示：如果有英文+中文的情况下，建议把英文字体写在前面，中文字体写在后面，应为是根据设置字体的先后顺序依次加载。（一般中文字体都适用于英文，但是英文字体不全适用于英文）
字体大小属性font-size

相对长度单位	描述
px	像素值，最常用的单位
em	倍数，继承祖先元素设置的字号倍数
%	继承祖先元素设置字号的百分比


in	英寸
cm	厘米
mm	毫米
pt	点

注意：实际应用中，网页中最小设置字号必须是12px,小于12px会出现兼容问题，普遍用14px+,尽量用偶数数字的字号

11、CSS样式属性-盒子实体化三属性

CSS样式属性-盒子实体化三属性常用属性名（width 、 height 、 background-color）

12、CSS的选择器

CSS的选择器（选择HTML中需要添加样式的标签元素）

基础选择器：标签选择器、id选择器、类选择器、通配符选择器
高级选择器：后代选择器、交集选择器、并集选择器

13、id选择器

id选择器，id必须唯一，必须以字母开头，

书写方式：#id属性值，选择范围：只能选中一个标签

14、类选择器

类选择器，通过标签的class属性去选择标签

书写方式：.class属性值
选择范围：页面中所有class属性值相同的标签，命名必须以字母开头，class属性值可以与其他的class相同 class内可以加多个类名，同时作用于一个标签上，两个类名用空格隔开 注：实际工作中，class 选择器用于CSS，id选择器用于JavaScript

15、通配符选择器

通配符选择器书写符号：* 作用于全部标签，包括html标签例: *{ background-color:red; } 整个页面颜色为红色

16、后代选择器

后代选择器（也叫包含选择器）通过标签之间的嵌套关系去选择元素，高级选择器是由于基础选择器组成

书写方法：空格表示后代，基础选择器之间用空格分隔，祖-父-子关系,一步一步选择后代，直到选择到需要更改样式的后代（可以层级选择，也可以跳过中间层直接选到要改样式的子集）

17、交集选择器

交集选择器基础标签进行连续书写，如果有标签选择器参与，那么标签选择器要写在前面例，p.demo#id ul p ==IE6浏览器不支持连续交集的写法==

18、并集选择器

并集选择器不同选择器选择的元素都要设置相同样式的情况下，可以将之前的6种选择器进行并集书写，书写方式；多个选择器中间用逗号分隔例: body,div,.demo,#id,ul,p

19、CSS层叠式（继承性）

CSS层叠式（继承性+层叠性）
继承性如果一个标签没有设置样式，但是他的祖先级以前设置过，那么这个标签会从祖先级标签继承这些样式，这就叫继承性，（能被继承的样式是所有文字相关样式属性，其他的属性不能能继承）

20、CSS层叠式（层叠性-选中目标标签）

层叠性当同一个标签被设置了多个选择器，按照规律层叠掉多余的，最终显示一个选择器的样式当目标标签被选择，层叠方法：

第一步：比较多个选择器权重，权重高的层叠权重低的 ①、基础选择器的权重（选择范围越发的权重越小）例：通配符选择器<标签选择器<类选择器<id选择器 ②、高级选择器权重比较（比较组成高级选择器的id个数，类个数，标签个数）比较顺序:id个数>类的个数>标签的个数例： 2个不同的高级选择器A、B，如果A里面id个数为3，类的个数为2，B里面id个数为2，类的个数为3，标签个数为1，那么层叠下来，最终显示结果A选择器设置的样式。如果A里面id个数为2，类的个数为2，B里面id个数为2，类的个数为3，那么最终显示结果为B选择器设置的样式。
第二步：注：如果每个选择器权重都一样，那么加载最后写的CSS那个选择器，后写的层叠掉先写的

21、CSS层叠式（CSS层叠性-目标标签的祖先级被选中）

目标标签的祖先级被选中选中的是目标的祖先级，文字样式被继承，也会出现层叠层叠方法：

第一步：就近原则，加载距离目标最近的选择器样式
第二步：如果祖先级的距离一样，就判断选择器的权重，*<标签选择器<类选择器<id选择器
第三步：祖先级距离相同，权重也一样，那么加载最后写的CSS那个选择器，后写的层叠掉先写的

22、CSS层叠性-important&内行式

important和内行式

important 在比较权重的时候，important可以提升某条属性的权重到最大在就近原则中使用important无效
内行式内行式权重高于所有其他选择器，但是低于important

编辑于 2020-12-17 10:06

前端入门