HTML Notes
Lesson 1 2023/3/18
文件类型： html
遵守w3c规范
一、文档版本：
docType HTML1.0 HTML4.0 XHTML1.0 HTML5
1.首先要表明这是一个什么版本的网页文档
<!doctype html>
! ( 强调声明 ) doctype 文档类型 空格 为 html
####二、标签
单标签
<!doctype html>
设置网页的展示语言 设置字符集编码
meta 标签 设置网页信息，设置网页编码集 utf-8
utf-8 是国际编码万国码 gb2312
设置能搜索到网页的关键字，建议不超过三十个，字节不超过150个
设置网页简介
双标签、结构性标签，其内部需要包裹内容或者其他标签
网页的大包围，所有的网页文档都要·写在html标签内
网页的基本信息
文件编码和文档编码不统一，打开网页就是一堆乱码
-
网页三要素 让搜索引擎能够收录网页
<title></title> <meta name='description' content="" > <meta name = "keywords" content="I,You,me"> - 标签里需要包含 meta charset , keywords, description, title （这属于属性标志）
三、书写格式
- 编程符号都要使用英文半角符号
- 单双引号没有区别，但保证风格统一，单引号不配双引号
- 标签层级下级要针对上级，要缩进一个TAB ，缩进有4空格 2空格
LESSON 2 2023/3/20
一、一些基础标签
-
标签 1>2>3>4>5>6 ·
h1 大标题，每个网页有且只有一个标签 ，只能有一个h1标签
h2 网页的分块标签 ， 2-5个
h3 主页详细分块内容的标题，个数根据需求而定
h4 非主页下的列表内容标题，相对于h3权重低
-
换行标签，单标签不加闭合符，不推荐 - 段落标签 语义化标签
-
标签 分割符 -
超链接标签
href 跳转目标地址，属性名称 href=“属性值”
target 打开标签的位置（目标）：当前 _self| 新开 _blank
id #表示id符，在id前面加#
<a href="www.baidu.com" target="_blank">amamam</a>
-
路径：通俗来讲就是地址
相对路径 …/ 表示上一级文件夹 （以自身为基准去其他地方寻址的过程）反斜杠
/ 表示进入一个文件夹
绝对路径（以客观地址为基准进行寻址） 比如 “D:\program(×86)\Tencent” 斜杠
在windows
<a href="E:\班长&学生会" target="_blank">amamam</a>
html不会去解析多余的空格、制表符、
3月27日
一、属性标签（属性名称=“属性值” ）//键值对的写法
-
lang属性 :html的lang属性，是指内容语言的。目的是让浏览器知晓这个页面的主要展示语言是什么
主要展示语言如果是英语： en 中文： zh-cn （提供给翻译的）
-
base 标签 加在head标签里
二、转义符号
-
浏览器对于文本之间的空格只能识别一个，转义符号： &转义符字节；
特殊字符 描述 转义符 空格 < 小于号 <> 大于号 >& 和号 &￥ 人民币 ¥© 版权 ©® 商标 ®
[转义符对照表][https://tool.oschina.net/commons?type=2]
ctrl+/
三、文本格式化标签（小标签）
-
字体加粗
-
斜体
-
删除线 -
下划线
b i u s 是没有语义性的， strong,em, ins, del 是有语义性的
四、图片标签
-
src 图像 插入图片
能复制绝不手写 -
width 宽度 height 高度 ，用图片属性值，不可以擅自更改，不能加单位 。px：指像素
-
alt 图片加载不出来了就会显示引号里面的文本，也作为爬虫辨识图片内容的关键字
src width height alt 图片四要素
-
title 文本 鼠标悬停显示的内容
-
border 数字（非常规） 设置图片默认边框的宽度
属性||属性值||描述
五、列表
-
- **无序列表**
- ul里面只放li标签，li里面可以嵌套其它标签
list-style:none; 可以清除默认小圆点
-
- **有序列表**
-
-
**分块列表**
- 名词解释1
- 名词解释2
名词2- 名词2解释1
六、div标签（盒子）
div标签是没有语义的 ， 是DIV+CSS时代的核心标签，单纯进行内容标签的容纳
div是division 的缩写，意思是分割、分区，我们可以利用DIV来给页面划分不同区域，呈现不同内容
语法
<div> <p>我是P标签，我在div里面</p> </div>七、span标签
span 标签是没有语义的，通常组合行内元素，以通过样式来格式化它们。
span没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。
<p><span>some text.</span></p>CSS层叠样式表 3月28日
一、行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签style属性来设置元素的样式，其基本语法格式如下：
<p style="属性1：属性值1；属性2：属性值2；属性3：属性值3；"> 内容 </p>style 是标签的属性，任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
###二、内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head> <style type="text/CSS"> 选择器{属性1:属性值1;属性2:属性值2;属性2:属性值3;} </style> </head>三、外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head> <link href="CSS文件的路径" rel="stylesheet" /> </head>注意：link是个单标签
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接的文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
三种样式表总结
样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便，权重高 没有实现样式和结构分离 基本为0 控制一个标签（少） 内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中） 外部样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多） CSS样式规则 4月6日
事例
<head> <style type="text/CSS"> font-size:18px; /*属性名称:属性值（单位）;*/ /*选择器 {属性名称:属性值(单位);}*/ //选择器和后面的花括号之间有一个空格！每一个属性设置好了之后都要加分号（英文） </style> </head>属性与属性值是以键值与键值对的形式存在的
一、选择器
-
标签选择器：按照标签样式分类设置样式
p {color: red;}//这样所有p标签中的文本都变成了红色 -
类选择器
首先对body中的标签板块设置属性
1234567
再在head中的style里对其设置属性
<head> <style type="text/CSS"> .man{ color= blue; } </style> </head>
-
id选择器
同样对正文中的标签设置属性
<p id="number">1234</p>再在head里面对其进行属性设置
<head> <style type="text/CSS"> #number{ color: blue; } </style> </head>W3C标准规定，不允许有相同名字的id对象出现，但是允许相同名字的class
-
通配符选择器
页面内所有的标签都选择到，优先级最后，
<head> <style type="text/CSS"> *{ font-size:20px; } </style> </head>
选择器优先级 id>类>标签>通配符
- 命名规范
- 命名需要语义性的词，不能是数字，符号，拼音
- 命名需要多个单词连接eider情况下，标记语言中可以用_-进行链接，不能直接单词拼接，不能用驼峰命名。注意：书写风格必须统一，不允许- _ 一起使用的情况，推荐使用-
- 命名需要进行适当的缩写
标签可叠加
<p class='f1 f2 f3 f4'>//这个标签里的文本将同时拥有f1 f2 f3 f4中的属性 </p>二、基础样式字体
-
font-size 字号大小，有相对长度和绝对长度之分
相对长度单位：px 像素单位，以像素点个数为基础，最常用的单位
em 相对于当前对象内文本的字体尺寸
绝对长度单位使用较少
很多浏览器不支持10px以下的字体
-
font-family 字体
PS：
-
现在网页中普遍使用14px+
-
尽量使用偶数数字字号。ie6等老式浏览器支持奇数会有bug。
-
各种字体之间必须用英文状态下的逗号隔开
-
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体是，英文字体名必须位于中文字体名之前。
-
如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号，
例如 font-family:“Times New Roman”;
-
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode 字体
对各种字体编码使用，这样更规范
Unicode编码转换 - 站长工具 (chinaz.com)
从这个网站转译unicode码，复制过去，注意要加引号，去掉u
为了照顾不同电脑字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
-
-
font-weight 字体粗细
可用属性值为：normal, bold, bolder, lighter, 100~900(一定是百的整倍数)
数字400等于normal, 700等于bold.但是我们更喜欢用数字表示，一般情况下就这两个值
-
font-style 字体风格
字体倾斜除了用i u 标签来使用，还可以用CSS来实现，但是CSS是没有语义的。
normal:默认值，浏览器会显示标准的字体样式
italic: 浏览器会显示斜体的字体样式
oblique: 浏览器会显示倾斜的字体样式
-
font 综合
选择器 {font: font-style font-weight font-size/line-weight font-family; }//中间用空格隔开使用font属性是，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size 和 font-family 属性，否则font属性将不起任何作用。
书写规范：一个属性排一行
三、CSS外观样式
-
color: 文本颜色
直接写名称、十六进制写法、rgb
如果使用rgb代码每一个都需要用百分号，就算是0也要用百分号
rgba 最后的a表示设置透明度，用.5表示0.5,节省内存
-
line-height 行间距/行高
行高是一个区域，文本放在区域的中央。单位可用px也可用%, %表示相对大小，相对于字号的大小。
默认字体大小为16px，此时行间距24比较美观。
-
text-aligh 水平对齐方式
text-aligh 属性用于文本内容的水平对齐，相当于html中的aligh对齐属性。
left 左对齐
right 右对齐
center 居中对齐
-
text-indent 首行缩进
缩进两字符 text-indent: 2em ; em表示相对大小
-
**text-decoration **
大多是标签有默认样式
- none 默认，定义标准的文本
- underline 定义文本下的一条线，下划线，也是我们链接自带的
- overline 定义文本上的一条线
- line-through 定义穿过文本下的一条线
4月11日
一、块元素的基本特性
- 块元素的特点：默认宽度100%。划分好区域、可以设置宽高，这决定了块元素可以搭建区域。独占一行。
###二、行内元素(inline-block)的基本特性
行内元素：
特性： 默认宽度根据内容来。显示宽度根据内容长度改变。不能设置宽高，不具备结构能力。不会独占一行。行内元素里面不能放块元素。
a标签比较特殊。扩展热区，用户交互。
inline-block:和相邻行内元素在一行上，但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度、行高、外边距以及内边距都可以控制。
<style> div{ display:inlineblock; } </style>把标签之间的空格删掉，就可以让block之间没有间隙
通过display可以修改标签原本的属性，行变块，块变行。修改之后就不会呈现原标签的属性了
图片与文本可以在同一行显示
行变块 display:block;
块变行 diaplay:inlineblock;
三、盒子模型div
-
width 盒子宽度：默认100%
-
height 盒子高度 默认0
-
margin 盒子与页面边框的距离
-
padding 内容与盒子边框的距离,设置之后会额外增加盒子的大小
padding-left padding-right padding-top padding-bottom
//padding 设置 //2个参数 padding:10px 20px;/*上下 左右*/ //3个参数 padding: 10px 20px 30px;//上 左右 下 padding: 10px 20px 10px 20px;//上 右 下 左
-
border 盒子边框
border:3px solid blue;具体设置：
- solid 单实线
- dashed 虚线
- dotted 点线
- double 双实线
- 上边框 border-top-style 样式
- 上边框颜色 border-top-color
- 下边框 border-bottom
- 右边框 border-right
- 左边框 border-left-style border-left-width
- 样式综合设置 border-style:(left/right/bottom/top) none solid dashed dotted double
- 宽度综合设置 border-width
- 颜色综合设置 border-color
持续更新中…
-
扫一扫
2018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
