html笔记

预备内容:软件安装篇

  1.  记笔记的工具---typroa
    
  • 文件名:基本文件名.扩展名

    Eg:SDN.docx 销售统计表.xlsx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtfODOuM-1582619782886)(D:\静态网页\1582514353120.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hwal5fuS-1582619782888)(D:\静态网页\1582514404194.png)]

2.截图工具的安装

①Greenshot

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VwHPjU6L-1582619782888)(D:\静态网页\1582514439485.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W60II0rl-1582619782888)(D:\静态网页\1582514468586.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I46uk1qc-1582619782889)(D:\静态网页\1582514484555.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LpOZABLY-1582619782889)(D:\静态网页\1582514502226.png)]

3.sublimes—无需安装

①解压

②将解压的文件复制到C:/program files下

​ ③选择sublimes.exe发送到桌面快捷方式

HTML

一、html简介
1.html是什么?

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

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

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

w3c:world、wide、web consortlum互联网联盟,制定我们web技术的相关标准和规范的组织,html就是由w3c制订的标准

两个版本:html 4.5.1,html 5.0----通常h5

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

4.扩展名

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

eg:hello.html

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

记事本notepad,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>
<body>主体</body>
<h1>一级标题</h1>
  • 非关闭型标签:只有开始标签,没有结束标签
<meta>
<br>
<hr>

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

  • 块级标签:显示为块状,独占一行
<h1></h1>
<hr>
  • 行级标签:在行内显示,可以与其他文本内容在同行显示
<span></span>
<html>
	<head>
		<title>标签的组成</title>
		<meta charset = "ytf-8">
	</head>
	<body bgcolor = "yellow" text="red">
		标签的组成
		<hr>

		HTML从入门到精通
		<hr>

		<hr>html简介,主讲:刘晓勇</hr>
		<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.基本标签

标签含义说明
br换行标签非关闭型标签
p段落标签关闭型标签,块级标签,前后段落之间有明显距离
h1、h2、…h6标题标签按照h1到h6逐渐变小
pre预格式化标签保留编码时的格式
div分区标签常用容器来使用,一般用于页面布局划分,块级标签
span范围标签默认情况没有任何效果,一般用来设置行内的特殊格式
ol、li有序列表有顺序的项目列表
ul、li无序列表无顺序的项目列表
dl、dt、dd定义列表对术语、图片等进行描述的定义的列表
hr水平线标签非关闭型
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、blue、white、black、pink、orange等

    ​ 16进制的RGB:red,Green Blue 用法:#RRBGGBB每种颜色的物质范围0-255,转换为16进制00-FF

    ​ eg:#FF0000红色,#00FF00绿色,#0000FF蓝色,#000000黑色,#CCCCCC,#FF7300橙色

  • size粗细、数值

  • width宽度

    两种写法:

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

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

n、blue、white、black、pink、orange等

​ 16进制的RGB:red,Green Blue 用法:#RRBGGBB每种颜色的物质范围0-255,转换为16进制00-FF

​ eg:#FF0000红色,#00FF00绿色,#0000FF蓝色,#000000黑色,#CCCCCC,#FF7300橙色

  • size粗细、数值

  • width宽度

    两种写法:

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值