HTML笔记

文件扩展名

Word.docx Excel.xlsx PPT.pptx

打开文件扩展名的方法:

在这里插入图片描述

或者:

在这里插入图片描述

####一、HTML简介

1.HTML是什么?

HTML:Hyper Text Markup Language 超文本标记(标签)语言

由各种标签组成,用来制作网页,让浏览器该如何显示页面

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

www:World Wide Web C:consortium

W3C:互联网联盟,制定Web技术的相关标准和规范的组织,HTML就 是由W3C制定的标准

两个版本:HTML 4.0.1, HTML 5.0-----通常H5

官网:https://www.w3school.com.cn

4.扩展名

HTML文件的扩展名:.html或.htm结尾

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

记事本notebook,sublime,notepad++,Dreamweaver,VScode,webstorm等

使用步骤:

1.新建文件(Ctrl+N),然后保存(Ctrl+s),指定扩展名.html

2.编写html代码

3.在浏览器中打开文件进行验证效果

######1.3浏览器

· 常见的浏览器,IE微软,Chrome谷歌,Firefox火狐,Safari苹果

·  浏览器作用:读取html文件,并以网页的形式进行显示

·   浏览器不会直接显示html标签,而是使用标签来解释网页的内容

2.标签
2.1标签的组成

一个完整html标签的组成:

<标签名 属性名 = “属性值”>内容</标签名>

属性值要使用引号引起来,一般使用双引号

2.2标签的分类

根据标签是否关闭,分为:关闭型和非关闭型

  • 关闭型 有开始标签,也有结束标签,一般是成对出现

  • <title>标签</title>
    <head>头部</head>
    <body>主体</body>
    <h1>一级标签</h1>
    
  • 非关闭型:只有开始标签,没有结束标签

    <meta>
    <br>
    <hr>
    

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

    • 块级标签:显示为块状,独占一行
    <h1></h1>
    <hr>
    
  • 行级标签:在行内显示,可以与其他文本内容在同行显示

    <span></span>
    
    <html>
    	<head>
    		<title>标签的组成</title>
    	<meta charset ="UTF-8">
        </head>
        <<body bgcolor ="red" text="blue">
        	标签的组成
        	<hr>
    
        	 html从入门到精通
        	 <hr>
    
        	 <h1>一级标题</h1>
        	 <hr>
    
        	 <h2>二级标签</h2>
        	 
        	 
        	 <h1>哈哈</h1>呵呵
        	 <hr>
    
        	 <span>嘿嘿</span>吼吼
        </body>
    </html>
    
2.3注释

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

<!----注释内容--->

######2.4实体标签

实体字符也称为特殊字符,用于显示一些特殊符号:如<>&空格等

语法:

&实体符号的名称;

常用实体字符:

  • &lt;       <  小于号     less  than 
    &gt;       >  大于号     great than 
    &nbsp;     空格    space 在html中对于连续的空白字符(空格、缩进、换行等),在浏览器中显示时只能显示 为一个空格 &amp;      &  与 
    &quot;     "  双撇号 
    &copy;     版权符号  copyright 
    &reg;      注册符号  register 
    &times;    关闭符号
    

注意:实体字符是严格区分大小写,及大小写敏感

2.5文档类型

在HTML文档的第一行,使用<!DOCUTYPE HTML>声明html文档的类型

用来告诉浏览器页面的HTML文档类型,简单来说,用来指定使用的html版本规范

目前基本上都使用的是HTML5,

三、常用标签
1.基本表格
标签含义说明

换行标签非关闭型标签

段落标签关闭型标签,快型标签,前后段落之间有明显的距离
h1,h2……标题标签标题h1到h6逐渐变小,块级标签,加粗显示
预格式化标签保留编码时的格式
分区标签常用容器来使用,一般用于页面布局划分,块级标签
范围标签默认情况没有任何效果,一般用来设置行内的特殊格式
    有序列表有顺序的项目列表
      无序列表无顺序的项目列表
      定义列表对术语、图片等进行描述和定义的列表

      水平线标签非关闭型标签,块级标签
      图像标签非关闭型标签,行级标签
      1.1有序列表

      ol:ordered list

      li:list item

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

      • type属性:设置列表前的标记,取值,数字1(默认),字母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:definition description

      1.4水平线标签

      hr:horizontal

      常用属性:

      • color颜色

        两种写法:

        颜色名称:如red,green,gray,black,white,pink,orange……

        16进制的RGB:用法:#RGBRGBRGB每种颜色的取值范围0-255转换为16进制的00-FF

        例如:#FF0000 红色 #00FF00 绿色 #0000FF 蓝色

      ​ 、#000000 黑色 #CCCCCC #FF7300橙色

      • size表示粗细,是数值

      • width宽度

        两种写法:

        ​ 像素:绝对值(固定值)

        ​ 百分比:相对值,相当于该标签所在的父容器的宽度的百分比

      • align对齐

        取值:默认center left right
        ######1.5图像标签

      img:image

      常见图片格式:.jpg .png .gif .bmp

      常见属性:

      • src:source指定图片的路径(来源),必选参数

      如果图片与html源代码在同一个文件夹中,可以直接书写图片的名称
      习惯上,会将多个图片存放到一个单独的文件夹中,如project\image,此时,需要在图片名称的前面添加 路径
      路径的分类:

      • 相对路径

        表示: ./当前路径

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

        ​ 提示:…/image

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

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

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

        默认情况下原始尺寸显示 如果只设置其中一个,则另一个按比例自动缩放 如果同时设置宽和高,可能会导致图片变形

        两种写法: 像素:绝对值(固定值)

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

      2.其他标签
      标签含义说明
      斜体italic
      强调的内容在浏览器中显示的为斜体
      地址在浏览器中显示一般为斜体,块级标签
      加粗bold
      强调的内容在浏览器中显示一般为粗体
      删除线delete
      下划线
      下标
      上标
      设置文本方向通过属性dir=“ltr”(left to right) “rtl”(right to left)从 右到左
      设置文本缩写通过title属性设置当前鼠标停留在文字上时显示的 提示信息
      相当于当前其他文本的字号减小一号
      相当于当前其他文本的字号增大一号

      为了更好的语义化

      3.头部标签
      • mata定义网页的摘要信息,如字符编码,关键字,描述,作者等信息

      • title定义网页的标题

      • style定义内部的CSS样式

      • link引用外部的CSS样式

      • script定义或引用脚本

      • base定义基础路径

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

                                              |
        

      | | 相当于当前其他文本的字号增大一号 | |

      为了更好的语义化

      3.头部标签
      • mata定义网页的摘要信息,如字符编码,关键字,描述,作者等信息

      • title定义网页的标题

      • style定义内部的CSS样式

      • link引用外部的CSS样式

      • script定义或引用脚本

      • base定义基础路径

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

      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值