梳理HTML基础

结构:

常用标签元素:

<head> 元素:

包含了所有的头部标签元素。

在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<!doctype html><!-- 文档头 -->
<head><!-- 脑袋是头部标签 -->
      <title><!-- 显示文件名 --><title>
 </head>
<body><!-- 身体网页里面显示的内容 -->
</body>
</html>
<!-- 切记必须默认闭合  -->

<title> 元素:


定义了浏览器工具栏的标题。

当网页添加到收藏夹时,显示在收藏夹中的标题。

显示在搜索引擎结果页面的标题。

HTML<title>元素不仅可以显示文本,也可以在左侧显示logo等图片。

显示时,要将<link>标签放入<head>里。

举例:

<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>

<base> 标签:

描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<!-- target 属性规定在何处打开被链接文档。
 -->

_blank 在新窗口中打开被链接文档。
_self 在被点击时的同一框架中打开被链接文档(默认)。
_parent 在父框架中打开被链接文档。
_top 在窗口主体中打开被链接文档。

<link> 标签:

定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> 标签:

定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档。

<head> <style type="text/css"> 
body {background-color:yellow} 
p {color:blue} 
</style>
</head>

 

<meta>标签:

描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为搜索引擎定义关键词  -->

<meta name="description" content="免费 Web & 编程 教程">
<!-- 为网页定义描述内容  -->

<meta http-equiv="refresh" content="30">
<!-- 每30秒钟刷新当前页面 -->

<h1> - <h6> 标签:

<h1>这是一个标题</h1> 
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>

标签 <p> :

段落用,上下留白多。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

标签 <a> :

<a href="https://www.runoob.com">这是一个链接</a>

标签 <img>

<img src="/images/logo.png" width="258" height="39" />

<image>图片标签,不需要闭合,需要放置src地址属性<img src='地址'>

<a href="里面放入要跳转的地址">链接定义名</a>,相当于某种意义上的超链接

<a href="里面放入要跳转的地址"target=_blank>超链接定义名</a>
target=_blank<!-- 打开新页面跳转,保留原页面 -->

<a href="里面放入要跳转的地址">img src='地址'</a>
<!-- 图片跳转,a标签里放入img标签 -->

<div>标签;

身体的各个部分都是<div>标签构成,特性是一层一层的。

<ul>标签:

无序列表标签(总标签),与<li>搭配使用。

<ul>
<li></li><!-- li可以有无限个,内容放置在li里就行,ul下面第一层只能放li标签 -->
</ul>

<ol>标签:

<ol></ol><!-- ol有序列表下面默认使用数字排序,使用方法与<ul></ul>一样 -->

<input>标签:

<input type="类型">{ ;input标签
text 默认可输入文本框
password 输入字符隐藏,用于密码框
radio 用于选项单选框(点框)
checkbox 多复选(钩框)
color 颜色框 弹出颜色选择
}
网页面上的常见按钮;
<input type="button" value="按钮上的文字">

<button>标签:

<button>内容</button>;button标签按钮类型

笔记之外,更多梳理网站;HTML|菜鸟教程

css部分:

三种引入方式:

1,标签选择器(大量选择)
2,ID选择器(唯一选择;权重最高)
3,类选择器(某一类选择;class,广泛用)
优先级id>class>标签选择器

atyle标签选择器:

会把所有选中的标签都赋予这个样式
<style>标签的3种方式:

  • 外链式;一般推荐使用形式,节省资源,不乱
  • 内嵌式;适合背景
  • 行内式;直接写入标签,浪费大量资源

执行等级;行内式>内嵌式>外链式

代码永远自上而下执行

1,(内嵌式)

<style>
选中类型的标签{width(页面块宽度): 200px(数字参数); height(页面快高度):200px(数字参数);
background(背景色):【颜色词】
</style>

2,(外链式)

<link rel="stylesheet" type="text/css(格式声明)" href="引入当前环境下的外链地址">

3,(行内式)

<div style='width:300px;height:200px;
background: 颜色词;' /div>
class

后代选择器(点隔开);

更精准的选择需要的元素
在css中 更精准,权重就越高
经常使用

.mydiv .last p{background: green;}
    </style>
</head>
<body>
    <div>
       <p>感谢大家的学习为了将来
       </p>
    </div>
    <div class="mydiv">
        <div class="last">
            <p>可以可以

群组选择器(点加逗号隔开);
有通用样式就,利用群组选择器
方便快捷,归类样式

.,a1,.a2,.a3{background: green;}
    </style>
</head>
<body>
    <p class="a1"今天心情不错></p>
    <p class="a2"今天心情不好></p>
    <p class="a3">还不错</p>

margin/padding 外边距/内边距(均可以互换)
内边距会改变元素大小,外边距不会改变
选择器{margin-right: 数量px;margin-left:数量px;margin-top: 数量px;}

缩写;

margin:4个值 上 右 下左
margin:3个值 上 左右 下
margin:2个值 上下 左右

所有的html元素一共可以分为三大类

常用的就两种:块状元素
div 最基本的块状元素

1,支持宽高 margin(外边距) padding(内边距)
2,width 默认是100%
3,块状元素可以随意嵌套

行内元素(input,valve)

1,span最基本的行内元素
2,不支持宽高,但宽高会随着内容变化而变化
3,支持margin,padding,页面上不独占一行,没有任何宽度默认
4,行内元素只能嵌套行内元素

    拓展; 颜色选择(可以利用photoshop)

1,{color:rgb(红数,绿数,蓝数)}专业个性化
2,{color:颜色词}常用背景
3,{color:#代码号}常用特定

border-边框:

1,占元素的大小,是往外面长的
2,缩写样式;

。border:大小(10px)solid/dashed(实线/虚线)
。颜色(#)(rgb())(颜色词)

3,非缩写样式;

。border-width
。border-color
。border-style

background-背景

非缩写;

。background-color-背景颜色
。background-image-背景图片
。background-size-背景图大小
。background-repeat-背景图平铺

(不平铺no-repeat)
(横坐标x轴平铺repeat-x)
(纵坐标y轴平铺repeat-y)

。background-position-背景坐标
(放两个参数,第二个参数默认center居中)
(第一个参数x轴,第二个参数y轴)
(支持 right右/bottom下/left左/top上/center居中 写法)

font:比较常用的缩写样式:

  font-size 可以控制文字大小

1,medium 合适的默认样式
2,后面可以直接放入像素(比较精准)如果未来去做网页的时候 那么就使用工具量一下像素(网页截图),然后写上就可以了
3,相对大一点

large
x-large
xx-large

4,相对比较小一点

samll
x-samll
xx-samll

font-weight 可以控制文字的粗细体

1,bold 加粗 bolder再加粗
2,lighter加细
3,支持数字1~1000,粗细调试

font-family 给予元素字体样式

1,开发人员上面的字体,如果使用者本机没有,无法网页显示
2,进行“或操作”(逗号隔开)
font-family:"simsun","Microsoft yahei"有其一选其一

  line-height 可以设定内容在自己的内部的高度位置

1,如果大小为元素的大小时,内容会在中心
2,可以控制行内元素,但是控制不了块状元素
3,% 继承父级的高度的来控制的,支持数字,常用px,不支持负数

   拓展

1,在html中 有些元素有自己的默认样式,
2,“*”星号 在选择器中可以作为“通配符” 可以选取所有的元素,层级算是最低了

   font-style样式

1,italic(斜体)是使用字体的斜体
2, oblique (倾斜)让字体倾斜

   font-variant

1,把段落设置为小型大写字母字体
2,small-caps

CSS 定位(重要)

一,float: leftr;position: relative //相对定位//

1,相对自己最早的初始位置进行定位
2,left(左) right(右) 只能选择一个
3,top(上) bottom(下)只能选择一个
4,z-index z轴(必须有position: relative)支持负数输入
5,相对定位不会影响原来的位置,显示的元素会变位置

二,position: absolute //绝对定位//

1,脱离标准流(从左往右,上至下排序)
2,原来的位置不会留着
3,绝对定位是根据有定位(加了position: absolute)父元素(嵌套的上一层)进行定位
4,如果父元素没有定位那么就会找到最外层的元素直到html

三,position:fixed //窗口定位//(鼠标滑轮滑动时的固定显示元素)

1,只会根据窗口 不看父级定位
2,有滚动条的话,一直跟着窗口走,绝对定位不会跟窗口走,

四,position: inherit //继承定位//

1,父级(上一层)是什么定位 他自己就是什么定位

 

五,static默认值(无定位)

1,    display 显示样式
2,:none 让原来的元素进行消失(无论行内还块状都会消失,位置不会保留,不是隐藏)
3,:block(display: inline-block 行内块元素) 让任何元素转成块状元素,并以块状元素显示(float也可以让元素变成块状元素)
4,inline 让任何元素转成行内元素,并以行内元素显示

拓展

行内元素-横着码
块状元素-支持宽,高,独占一行
行内块元素-支持宽,高,不独占一行,横着码
left % 对应的就是父级的width
top % 对应的就是父级的height

元素单位

1,px(像素)绝对单位 不会因为浏览器窗口缩放大小而变化,单位的值必须是整数值
2,百分比% 相对单位,无具体像素值,会因为浏览器窗口缩放大小而变化,百分比计算:根据父级元素为参考(例heigh 50% 就是父级高度的一半)

3,in - 表示英寸,是一个物理单位,在CSS中被直接映射成为px; 转换的方法是 1in = 96px
4,cm - 表示厘米,在生活中常用的单位,同样被映射为 px; 转换方法为 1cm = 37.8px
5,mm - 表示毫米,与cm类似,转换方法为 1mm = 0.1cm = 3.78px
5,em 与 rem

em 单位的值等于基本元素或父元素的字体大小。

例如,如果父元素的字体大小为16px,则所有直接子元素中的1em值将计算为16px。基于基本单元的知识,可以很方便的增大或减小子元素的字体大小。 这里的值不需要是整数。

使用em可以轻松地将各种元素的字体大小保持在固定比例。

例如,如果父元素的font-size的值为50px,则将子元素的字体大小设置为2em, 相当于设置为100px。 类似的,将它设置为0.5em将使得子元素的字体大小为25px。

另外有一点需要注意:如果想要通过 em 设置当前元素的大小值,并且不是相对于直接父元素,而是相对父元素的父元素或者根元素,就会变得很复杂,因为每一层都要进行计算

 

6,可视区高度单位(vh)和可视区宽度单位(vw)

 

vh单位与可视区的高度相关。vh的值等于可视区高度的1/100。如果我们要根据浏览器窗口的高度来调整元素,这个单位是有用的。 例如,如果可视区的高度是400px,则1vh等于4px。 如果可视区高度为800px,则1vh等于8px。

类似的,vw单位与可视区的宽度相关。 因此可以推算1vw的值。 1vw就等于可视区宽度的1/100。 例如,如果窗口的宽度为1200px,则1vw将为12px。

7,vmin 和 vmax

vmin 是当前 vm 和 vh 中较小的一个值,也就是说,是可视区域较小的一边的1/100的长度; 例如:可视区大小为 1000x800, 则 wmin = 800/100 = 8px; 如果可视区大小为 600x800, 则 wmin = 600/100 = 6px;

类似的, wmax 是当前 vm 和 vh 中较大的一个值,也就是说,是可视区域较大的一边的1/100的长度; 例如:可视区大小为 1000x800, 则 wmin = 1000/100 = 10px; 如果可视区大小为 600x800, 则 wmin = 800/100 = 8px;

opacity 透明效果样式 支持小数

radius
boder-radius 页面框四角圆角
boder-left-top 页面左上角变成圆角 以此类推

hover 鼠标触到变色

例子:

先记到这里,虽然看起来挺乱的

.topnode ul li a:hover{
color: #071ac8;
}
届ける言葉を今は育ててる
最后更新于 2022-07-28