2. 技术
    3. HTML笔记(1)

    HTML笔记(1)

    技术2022-07-10  113

    一、HTML简介

    1.HTML是什么？

    HTML：Hyper Text Markup Language超文本标记（标签）语言 由多种标签组成，用来制作网页，告别浏览器该如何显示网页

    2.HTML语言的作用？
    制作网页，控制网页和内容的显示插入图片、音乐、视频、动画等多媒体通过链接检索信息使用表单获取用户信息，实现交互
    3.版本

    W3C：World wide web consortium万维网联盟，制定WEB技术相关标准和规范的组织，HTML就是由w3c制定的标准 两个版本：HTML4.0和HTML5.0-----通常H5 官网：https：//www.w3chool.com.cn/

    4.扩展名

    HTML文档是以.html或.htm结尾

    二、HTML文档的基本结构

    1.基本结构
    1.1简介
    HTML标签是由尖括号括起来的关键词，如<html>,通常都是成对出现的，如<html></html>以<html>为根标签，包含<head>头部和<body>主体部分头部提供关于网页的相关信息，如标题、字符编码、文档类型、关键字等摘要信息主体部分提供网页的具体内容，真正显示在页面中内容合理的进行缩进标签名不区分大小写，但一般要用小写
    1.2开发工具

    记事本notepad 、 sublime、 notepad++、 Dreamweaver 、VScode 、Webstorm等 使用步骤： 1.新建文件（Ctrl+N），然后保存（Ctrl+S），指定扩展名为.hmtl (代码无颜色提示) 2.缩写HTML文件 3.在浏览器中打开 使用技巧：

    先保存再编写代码，否则没有颜色提示建议创建一个文件夹，用于保存所有的网页内容，讲文件夹拖拽到subllime中打开，便于管理显示/隐藏侧边栏 方式一：查看–>侧边栏–>显示/隐藏侧边栏 方式二：Ctrl+K再按B显示多栏 方式一：查看–>布局–>列数：2列 方式二：alt+shift+2
    1.3浏览器

    常见浏览器：IE浏览器微软、 Chrome谷歌浏览器、 Firefox火狐、 Safari 苹果 浏览器的作用就是来读取html文件，并以网页的形式进行显示 浏览器不会是直接显示html标签，而是使用标签来解释网页的内容

    2.标签
    2.1标签的组成

    一个完整的HTML标签的组成： <标签名 属性名= “属性值”>内容</标签名>

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签</title> </head> <body bgcolor="red" text="blue"> html从入门到精通！ </body> </html>

    属性值要用引导引起来，一般用双引导号

    2.2标签的分类

    根据标签是否关闭，分为：关闭型、非关闭型

    关闭型：有开始标签也有结束标签，即标签成对出现

    <html></html> <head></head> <title></title>

    非关闭型：只有开始标签，没有结束标签

    <meta> <br> <h1>.....<h6>

    根据标签是否独占一行，分为块级标签和行级标签

    块级标签：显示为块状，独占一行

    <h1>大家好</h1> <hr>

    行级标签：在行内显示，可与其他内容在同一行显示

    <span></span>

    2.3注释

    注释在浏览器中是不会显示的，是用来标注解释html语句，但通过查看源代码的方式可以看到

    语法格式：

    <!--注释内容-->

    2.4实体字符

    也称为特殊字符，用于显示一些特殊符号，如：<>&空格等

    语法：

    &实体字符的名称；

    常见的实体字符：

    < < 小于号 less than > > 大于号 greata than   空格 space 在html中对于连续的空白符号（包括空格、换行、TAB等），在浏览器中显示为1个空格 & & 与 " "" 双引号 © © 版权符号 copyright ® ® 注册符号 register × X 关闭按钮
    2.5文档类型

    在htnl文档的第一行，使用声明HTML文档的类型用来告诉浏览器页面的文档类型，简单来讲，用来指定html版本的规范目前基本上最常用的html5，

    三、常用标签

    1.基本标签
    标签含义说明br换行标签非关闭型p段落标签关闭型、块级标签，段落前后有明显的间隔h1、h2…、h6标题标签按照h1到h6逐渐变小，块级标签、加粗明显pre预格式化标签保留编码时的格式div分区标签常作为容器来使用，一般用来页面布局，块级标签span范围标签默认情况下没有效果，一般用来设置行内的特殊格式、行级标签ol、li有序列表有顺序的项目列表ul、li无序列表无顺序的项目列表dl、dt、dd定义列表对术语、图片等进行描述定义的列表hr水平线标签非关闭型标签，块级标签img图像标签非关闭型标签，行级标签
    1.1有序列表

    ol:ordered list

    li:list item

    默认情况下使用阿拉伯数字，从1开始做标记，可以通过属性进行修改

    type属性：设置列表前的符号标记，取值：数字（默认），字母形式（a或A），罗马数字（i或I）start属性：设置起始值，起始值必须是数字
    1.2无序列表

    ul:unodered list

    li:list item

    默认情况下使用实心圆作为符号标记，可以通过属性进行修改

    type属性：设置列表前的符号标记，取值：disc实心圆（默认的）、circle空心圆、square正方形、none不显示符号
    1.3定义列表

    dl:definition list

    dt:definition title

    dd:denfinition description

    1.4水平线标签

    hr:horizontal

    常用属性：

    color颜色

    两种方式：

    颜色名称：如red、green、blue、white、black、pink、orange等

    16进制的RGB:Red、Green、Blue常用法：#RRGGBB 每个颜色的取值范围是0-255转换为16进制00-FF

    如:#FF0000红色 #00FF00绿色 #0000FF蓝色 #000000黑色 #FFFFFF白色 #CCCCCC灰色 #FF7300

    桔色

    size粗细，数值

    width宽度

    两种写法：

    像素：绝对值（固定值）

    百分比：相对值，相当于该标签所在的上一级父容器的宽度的百分比

    align对齐

    取值：center默认 left fight

    1.5图像标签

    img:image

    常见的图片格式：.jpg .png .gif .bmp

    常见属性：

    src:source指定图片的路径（来源），必选参数

    如果图片与html源码在同一个文件夹中，可以直接书写图片的名称

    习惯上，会将多个图片存放到一个单独的文件夹中，如project\image,此时，需要在图片名称的前面添加路

    径

    相对路径

    表示： ./当前路径

    …/当前位置的上一级文件

    提示：…/image

    alt:当图片无法正常显示时提示的信息

    title:当鼠标停留在图片上时显示的提示信息

    width/height:设置图片的宽度和高度

    默认情况下原始尺寸显示

    如果只设置其中一个，则另一个按比例自动缩放

    如果同时设置宽和高，可能会导致图片变形

    两种写法：

    像素：绝对值（固定值）

    百分比，相对值，相对该标签所在的上一级父容器的宽度的百分比

    2.其他标签
    标签含义说明i斜体标签italicem强调的内容在浏览器中显示时一般为斜体address地址标签在浏览器中显示时一般为斜体，块级标签b加粗显示blodstrong强调的内容在浏览器中显示时一般为加粗del删除线deleteins下划线sub下标sup上标bdo设置文本的方向通过属性dir=“rtl” right to left从右到左显示或 “ltr” left to rightabbr设置文本的缩写通过title属性设置当鼠标停留在文字上时显示的提示内容small相当于当前字号缩小一个字号big相对于当前字号增大一个字号

    为了文本更好地语义化

    3.头部标签

    meta定义网页的摘要信息，如字符编码，关键字

    title定义网页的标题

    style定义内部的CSS样式

    link引用外部的CSS样式文件

    script定义或引用脚本

    base定义网页的基础路径

    默认情况下，是以当前页面文件所在的位置为相对路径的参照

    4.标签嵌套

    一个标签中嵌套另一个标签

    浏览器渲染后显示的页面代码与编码时的代码有所不同

    Chrome浏览器提供的开发工具，用来帮助开发人员查看和调试页面的工具：

    如何打开：

    在页面的空白处—>右键 -->检查/审查元素/查看元素

    按F12

    常用工具：

    elements:从浏览器的角度查看页面，浏览器渲染页面时的结构内容

    console:控制台，显示各种警告和错误信息

    network:查看网络请求信息，浏览器向服务器请求了哪些资源，资源大小，加载资源所花费的时间

    四、超链接

    1.简介

    使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转

    当鼠标移动超链接文本上时，鼠标的键头会变成一只小手

    超链接的三种类型：

    普通链接/页面间的链接：跳转到另一个页面

    锚链接：跳转到一个锚点

    功能性链接，实现特殊功能（发邮件，下载图片）

    2.基本用法

    使用 <a>标签创建超链接

    基本语法：

    <a href="链接的地址" target="链接打开的位置">链接的文本或图像</a>

    常见的属性：

    href链接地址/路径,链接地址

    target:链接打开的位置,取值

    `_self(自己，当前，默认值)

    _blank(空白，新的)

    _parent(父层框架)

    _top(顶层框架)，自定义 `

    路径分类：

    绝对路径

    以根开始的路径

    file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png

    相对路径

    相对于当前页面文件所在的路径,不是以根开始的路径

    ./ 当前路径

    …/ 当前位置上一级目录

    3.锚链接

    3.1简介

    点击链接后跳转到某一个页面的指定位置（锚点anchor）

    锚链接的分类：

    页面内的锚链接

    页面间的锚链接

    3.2 页面内的锚链接

    步骤：

    1.定义锚点（标记）

    <a name="锚点的名称">目标位置</a>

    2.链接锚点

    <a href="锚点名称">链接文本</a>

    3.3页面之间的锚链接

    <a href="目标页面的文件名#锚点名称">链接文本</a>

    4.功能链接
    5.URL
    5.1简介

    URL:Uniform Resource Locator 统一资源定位器,用来定位资源所在的位置，最常见的就是网址

    https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.常用标
    转载请注明原文地址:https://ipadbbs.8miu.com/read-1423.html
    最新回复(0)