菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础第二天-陈仪-20230411 [打印本页]

作者: mx68333 时间: 2023-4-11 23:43
标题: 前端基础第二天-陈仪-20230411
一、今日知识点
1、HTML简介
网页：网页就是网站中的一页，通常是HTML格式文件，他需要通过浏览器来进行阅读
网站：就是使用HTML等内容制作的网页集合
什么是HTML：超文本标记语言
什么是超文本：超链接可以跳转到其他网页
2、浏览器
六大浏览器：IE，edge，Firefox，Chrome，Opera，Safari
国内的浏览器一般使用的是Webkit或者是Blink内核
3、Web标准
Web标准是由W3C组织和其他一些标准化的组织指定一系列的网页标准
为什么我们需要web标准：因为浏览器不同，解析出来的网页排版会有差异，所以没有标准，开发者就需要根据不同的浏览器开发不同的网页，工作量巨大，有了Web标准，那么针对不同的浏览器只需要一套网页即可
Web标准包括：
      结构（Structure）结构用于网页元素进行整理和分类，主要使用HTML
      表现（Presentation）用于设置网页元素的版式，颜色，大小等外观样式，主要使用CSS
      行为（Behavior）行为指的是网页中交互内容，主要学习的是JavaScript
4、HTML的语法规范
基本语法：
      标签组成：HTML标签是由尖括号包围的关键词组成的例如<html>
      成对出现：HTML的标签通常成对出现的，例如<html></html>,称之为双标签，标签中第一个标签是开始标签，第二个是结束标签
      单标签：有一些特殊的标签必须是单标签（情况比较少），例如<br>标签
标签关系：
      并列标签（兄弟标签）
      包含关系（父子标签）
5、HTML的基本结构标签
<html></html>标签是页面中最大的标签，也叫根标签
<head></head>标签是页面的头部标签，必须要写的是<title></title>
<title></title>页面标签顶部区域标题内容，让页面能有一个自己的标题
<body></body>页面中的主体内容都放在body标签中
6、HTML的文档后缀：HTML的文档后缀必须是.html或.htm，浏览器的作用是读取HTML文档，并通过内核渲染显示内容
7、开发工具
Dreamweaver、Sublime、WebStrom、Hbuilder、VSCode
VSCode：
      新建文件Ctrl+N
      保存Ctrl+S
      Ctrl+加号/减号放大缩小视图
      alt+shift+f 快速格式化代码
      生成页面的骨架标签：输入英文感叹号“!” 按下tab键即可
      alt+shift+下键快速复制上一行代码
8、骨架新增标签
<!DOCTYPE html>
      这个声明就是告诉浏览器使用HTML5的标签来显示网页
      注意点：
         DTD文档定义代码应该要卸载HTML文件的最前面
         DTD不是HTML的标签，是另一种专门来定义标签语言的语言
<html lang="en">
      用来定义当前文档的显示语言，但是目前不管是定义成中文还是英文，浏览器对于这两种语言都能正常显示
charset字符集
      字符集是多个字符的集合，方便计算机识别和存储各类文字
      常见的字符集有：GB2312、GBK、UTF-8
9、常用标签
标签的语义：就是指标签的含义，说明这个标签用来干嘛的
标题标签：
<h1></h1>---<h6></h6>
h是单词head缩写，意为头部，标题
特点：
字体会加粗显示
重要性一次递减
每个标题标签会单独占一行
段落标签：
p是单词paragraph的缩写
<p></p>标签用于定义段落
语义：分割HTML的段落
特点：
文本在一个段落中达到浏览器的边界会自动换行
段落和段落之间保留有垂直距离
换行标签：
<br>标签能控制文本的强制换行
br是单词break的缩写
语义：强制换行
特点：
<br>标签是一个单标签
<br>标签只是单纯的开始新的一行，不会增加断货之间的距离
文本格式化标签：
加粗  <strong></strong>或者<b></b>
倾斜<em></em>或者<i></i>
下划线<ins></ins>或者<u></u>
删除线<del></del>或者<s></s>
标签属性：
指的是这个标签的特性
在标签名之后用空格分开
属性名和属性值是用=链接的
属性值必须要写在双引号之中
标签的属性可以有多个，而且没有先后顺序
div标签和span标签：
div标签和span标签没有特殊的语义，简单来说就是在网页上划分盒子
div特点：每一行只有一个div
span特点：一行可以用多个span
图像标签：
img标签来引入图像
常用属性：
src = "图片书的路径" 是必须的属性
alt = "替换文本" 当图片加载失败时显示的文字内容
title = "提示文本"  当鼠标移动到土拍你上的时候显示的文本
width = "像素值"  设置图片的宽度
height = "像素值" 设置图片的高度
border = "像素值"  设置图片的边框粗细
注意点：
如果图片没有设置宽度和高度默认使用图片原来的大小
如果宽度和高度单独设置，那么另一个没有设置的属性就会等比例进行缩放
10、相对路径和绝对路径
相对路径：
以我们当前的文件为其实参考点，一级一级的建立目录路径
../代表上一级目录
/代表下一级目录
./代表当前目录
绝对路径：
从盘符的根目录下一步一步的建立路径，和当前文件路径是没有关系的
11、超链接
在HTML标签中使用<a></a>标签来定义超链接
超链接的语法：
a是单词 anchor意味锚
常用属性
href 用于指定连接目标的URL地址，是必须属性
target 用于指定链接页面的打开方式，如果是默认值"_self" 代表在当前页面打开，"_blank"代表在新窗口打开
超链接的分类：
外部链接、内部链接、空连接、下载链接、网页跳转链接、锚点链接
12、base标签
<base href = "跳转的目标" target = "网页打开的方式" >
base标签一般会写在<head></head>标签中，作用是对所有的相对链接规定一个默认的URL地址，或者提供一个默认目标
13、HTML的注释和特殊字符
注释：如果需要在HTML文档中添加一些便于阅读和理解代码的内容，又不能在页面中进行显示，需要用注释
特殊字符：
在HTML页面中，一些特殊的符号只能用实体引用的方式来显示
实体引用使用"&"开头，以";"结尾

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)