“曾经”html基础笔记

最新推荐文章于 2024-01-13 21:51:15 发布

菜鸟要飞飞飞

最新推荐文章于 2024-01-13 21:51:15 发布

阅读量145

点赞数 1

本文链接：https://blog.csdn.net/weixin_40912500/article/details/86502996

版权

<！DOCTYPE html.>标题头部（超文本语言）

<head lang=”en”>标签

注释<!<link rel=”” type=””/>

文字编码常用

文字出现乱码原因：代码内容为<meta name="content-type" content="text/html; charset=UTF-8">charset选择的是UTF-8文件选择的并不是utf-8所以乱码（右键文件选择更改）

GB2312

GBK

UTF-8

国外

UTF-16

ISO8859-1

...

<.title>题目

<body>主体

<.hl></hl.>小标题2/3/4/由大到小以此类推(本身加粗0)。。。。。。。。。，。<h4.></h4>跟本身文字的差不多大

,.<h3></h3>注释

<.P></p.>段落

<br/>

行及标签占一行中的一小块

<.strong<.em>.<img><a>

块及标签占一整行

<h1.><p.><hr.>

特殊标签<.br./>

<hr/>贯穿线

<em></em>倾斜

<strong></strong>加粗

文本操作标签：<h1>-<.h2>,<.p><strong><br.><em><.hr>

W3c标准

1结构化标准语言（xhtml,xml）

2保险标准语言

3行为标准语言

图片

图片路径:相对路径，网页上的图片；绝对路径，硬盘上的图片。

同级目录直接写文件名字<img src=”” alt=(图片加载失败时显示的文字)” ”title=（鼠标指向图片时显示的内容）”>

空格

Shift+空格=空格半角字符切换全角字符

<小于号<；如果时间>晚上六点，就坐车回家

>大于号>

引号（“）"

版权©

插入图像标签

<.img src =”(file://代表根目录找文件0）ff(:英文)（盘符）/(..返回上级目录)（目录名/图片名）’’alt=’’ ’’提示加载失败文字）（width=”200”宽度）（height=’’100’’/高度）title=”（鼠标指向图片时显示的内容）”>

插入视频

<body>

插入音频

单位：

px像素

Mm毫米Cm厘米

In英寸

Pt镑

pc派卡

例子：单元格的对齐方式改为水平右对齐，垂直底端对齐

<tr>

</tr>

</table>

超链接

http://

Href:链接地址

代表当前页面

Target：是否在新页面打开

-black新页面打开

-self在本页面打开

锚链接：

字的外部链接：外网页面<a href="http://www.baidu.com/"（链接地址)>百度</a>

点击图片，会打开新页面:<a href=”新链接 ” target=””><img src=”图片链接”></a>

功能性链接

JPG 压缩会改变颜色

PNG 支持透明

GIF 动图

BMP 保留图片原色

例子；

<html>

<head.>

<.title> 第一个网页<./title.>

</head>

<.body>

<h1>网页<./h1

.......

</body>

</html.>

2有序列表<ol type=’’ A’’>

<li>fergds</li>

</ol>

无序列表<ul>,</ul><li></li>list列表

定义列表<dl>

表格：<table>

<tr>行

</tr>

</table>

表格对齐方式：默认对齐，居中对齐align=center,左对齐，右对齐

单元格对齐方式：水平对齐方式，垂直对齐方式，

Align(水平对齐方式）row:行，column列，cell单元格，spacing间距，border边框，width宽度，height高度，padding填充valign垂直对齐

Left	左对齐
Center	居中对齐
Right	右对齐

Valign垂直对齐方式

top	顶端对齐
middle	居中对齐
bottom	底端对齐
baseline	基线对齐

html里表格概念：

<tr height="100px">高度

<td width="100px"(宽度)align="center"(水平居中)"right"(右对齐)"left"（左对齐）></td>行中的一列

</tr>行

</table>代表表格

<tr colspan="2">跨列

<td rowspan="2">跨行

valign

<tr>

3（选择value,name都写，文本框写name）

开始<form action=”地址” method=”get/post”/>

结束：</form>

用户名<input type=”text” name”” maxlength=”10” placeholder=”用户名2~6位数”/>

maxlength几位数的限制

密码<input type=”password” name=””/>

性别：<input type=”radio” name=”” value=”boy” id=”zz” checked=”checked(默认被选中)”/><lable for=”zz”>男

</lable>

<input type=”radio” name=”” value=”girl” id=”ss”/><lable for=”ss”>女</lable>点击字依旧能选择在男女的<>里加id=””名字，后面加<lable for=填id里面命的名字”>女</lable>

checked=”checked(默认被选中)”只能在checkbox,radio中用；

type单选

兴趣爱好（多选）<input type=”checkbox” name=”” value=”eat”/>按时吃饭

checkbox多选

<form>

上传文字：<input type=”file” name=”upload” hidden=”hidden”(隐藏属性)/><br/>

所在城市：<select name="ciry"><selected=”selected”>默认被选中

<option value="qd" selected=”selected”(默认选中)>青岛

<option value="yt">烟台

<option value="jn">济南

<option value="jd">胶东

</select><br>

简介:<textarea rows="3" cols="5" name="jianjie" readonly=”readonly”>我是</textarea><br/>

disabled="disabled" 禁止使用 readonly只读

<input type="reset" value="重置">

</form>

Ctrl+alt+向下的键(复制

Ctrl+z撤销

Ctrl+d(删减一行）

Ctrl+s(保存)

Alt+/(提示，代码补全)

<1--隐藏域；页面看不见，但可以传到后台-->

邮箱：<input type=”email” name=””>

年龄：<input smtype=”number” name=”age” min=”1” max=”99” step=”1”><br/>

生日：<select name=””/></select>年

<select name=””></select>月

min最小值；max最大值；step

Css

<span>该改段落里面的个别字体

内部样式

必须在</head>前面添加<style type=”text/css”>

选择器+{样式；}（例子 h1{color：red;}）

</style>

{color：#00 00 00}

颜色变化(查颜色rgb)：#00（red） 00(green) 00(blue)

{color#000/#rgb（rgb泛指代码）}

十六进制

Ctrl+shift+/

Ctrl+shift+\：消除
/

字体风格{font-style：italic(倾斜)}

Normal(垂直)

Font-weight字体粗细{font-weight:700px;}

normal标准字体

font-size改字体大小{font-size:90px}

字体类型{font-family：隶书}

{Border：10px solid red}；border边框 solid实现

在一串文字中添加所有属性Font:1.style 2.weight 3.size 4.family

行内样式；分别变化

标签

样式位置：1行内标签（最大）:标签内,单独添加<h1 style=”color:green;”></h1>

2内部（改所有）：<style type="text/css">

p{color:green;

font-size:14px;}

</style>

</head>

3外部（插入）<link rel="stylesheet" type="text/css" href="新路径.css"/>

选择器：span圈字

A.行内(最大)<style type="text/css">

p{color:green;

font-size:14px;}

</style>

B.类选择器:（挑不同的标签）

.aaa{color:pink;}

.bb{}

</style>

插入<p class="aaa">疑是银河落九天.</p>

<p><span class="bb">我是你</span>在你以为举不俊<p>

span一行中仅一块变色

C.ID选择器（不能重）：只能管第一个，就加一个，

#myid{color:blue;}

</style>

<p id="myid">飞流直下三千尺,</p>

超链接上＋颜色

a{color:red;}

<a href="https://daohang.qq.com/?fr=hmpage">慈文传媒集团</a>

层次选择器

后代选择器：E F
子代选择器：E>F（选中儿子辈的）
紧邻兄弟选择器（同辈，紧跟在后面）：（类选择器+F)
通用兄弟选择器（只能选中后面的兄弟）：E~F（类选择器~F）
交集：（E类选择器）
并集：（E，类选择器）
结构伪类选择器

Ul li:first-child{}
Ul li Last-child{}

3.nth-child(n):例子p:nth-child(2){}先数个数，在看类型

4. (body p:first-of-type{}先数类型,在数第几个

5. body p:last-of-type{}

6. body p:nth-of-type(n){})

属性选择器：a【id】

a【id=img】=具体

a[id^=img]^表看开始的单词

a[id$=img]$表看结尾的单词

a[id*=img]*表看中间的单词

美化页面

1.Font-weight字体粗细{font-weight:700px;}

normal标准字体bold加粗，bolder更粗lighter更细

2.字体风格{font-style：italic(倾斜)}

normal(垂直)

3.字体类型{font-family：隶书}

{Border：10px solid red} border边框 solid实现

在一串文字中添加所有属性Font:1.style 2.weight 3.size 4.family
文本{text-align:cente r;justify(文本两端对齐)

Text-decoration（文本装饰）:underline

(下划线)line-through;(中间线)overline;(上划线)

Text-indent:40px;(首行缩进)

Line-height(行高):10px（em）;}

去掉超链接中下划线ａ｛Text-decoration；none;｝
{Color:rgba(a控制透明不透明)（255,0,0,1）;}
Img{vertical(垂直)-align:middle、top、bottom’;}

文本阴影：

{text-shadow:color x(+10px) y(-10px) 0.5px(阴影模糊半径)}

伪类样式

选择器：伪类名{样式；}

hover当鼠标指向时变样式,a:hover{}

改变列表样式

ul{List-style-type:square(方块);decimal（数字）;circle（空心圆）;disc（实心圆）；none（无标记）;/*控制黑点样式*/}

背景色{background-color:red;}

背景图

{background-image:url(“”);

Background-repeat( 背景图重复） :no-repeat(repeat-x/repeat-y);

Background-position(背景图位置):150px（x右正左负） 150px（上负下正）;

Background-size:cover(覆盖)；percentage（百分比）;contain

线性渐变

{background:-webkit-（搜狗内核前缀）linear-gradient（left （起点）,blue,white）；}

Background:-webkit-linear-gradient(left,white,blue)IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

盒子

div{i.border:1px solid blue;

ii.分部写border-top-width:5px;

border-top-color:red上边框颜色

iii.border-style:double双实线；solid实dashed虚（上右下左看对门

（border-bottom:1px solid blue;）

{margin外填充-top:0px}

{img src=”img/manor-2.jpg”}

图片填充img {margin-left:0px auto；margin-top:10px;}

{text-align:center;}

padding内填充
控制弧度左1顺时针排列border-radius: 20px 10px 50px 30px;

圆{border-radius:50%;}

5.控制盒子的大小box-sizing：content-box （可变动） | border-box （不变）| inherit;

6.box-shadow:inset(上往下)/ 10px(x轴) 10px 5px black;

第七章

display

display:inline;不换行，没有原来的体积

inline-block;不换行，没有原来的体积，使块元素排在一行

none不会显示

display:none；隐藏

Block换行

float浮动

{float:left; |right; |none;不变}

{Clear:清除浮动}

left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

{overflow溢出：scroll滚动/hidden隐藏}

<li><button id="btn2">开通超级会员</button></a></li>

button按钮

移动图片位置Position

{Position:relative/*相对自己的位移，不会脱离文档*/

absolute；/*绝对位移，会脱离文档流*/(若自己当前最近父级盒子没定位，找他定位；若他进行了定位，相对浏览器定位}

{Position:relative；left:10px;top:20px;}

控制透明度{Opacity:0.5px;}数值越小，透明度越高

覆盖z-index:3/2/1大的覆盖小的

第九章

设置变形函数，可以是一个，也可以是多个，中间以空格分开；

{transform:translate(230,230) scale(2); }

平移函数Translate；

缩放Scale（2）（x,y）

x即表示宽度的缩放量，y轴即高度的缩放量

旋转Rotate（250deg）

倾斜Skew（x,y）

X即x轴的倾斜程度，y即y轴的倾斜程度

过渡Transition:all/（过渡或动态模拟的CSS属性

） transition-duration（完成过渡所需要的时间

） transition-timing-function（指定过渡函数

） transition-delay（过渡开始出现的延迟时间

）

类举：div:hover{

transform:skew(20deg);

transition:all 0.6s linear;

}

ease：速度由快到慢（默认值）

linear：速度恒速（匀速运动）

ease-in：速度越来越快（渐显效果）

ease-out：速度越来越慢（渐隐效果）

ease-in-out：速度先加速再减速（渐显渐隐效果）

动画

   定义：@keyframes aaa {

0% {width:0;}

   33% {width:23px;}

   66% {width:46px;}

   100% {width:69px;}

}

Img{animation:aaa 3s ease forwards;}

{animation:name 动画时间

动画方式延迟时间动画的播放次数的播放方向动画的播放状态

动画开始之前和结束之后发生的操作;}

动画的播放方向（animation-direction）

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

动画的播放状态（animation-play-state）

running将暂停的动画重新播放

paused将正在播放的元素动画停下来

菜鸟要飞飞飞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
“曾经”html基础笔记

1&lt;！DOCTYPE html.&gt;标题头部（超文本语言）&lt;head lang=”en”&gt;标签&lt;meta charset=”gb2312”&gt;&lt;meta charset=”keywords”content=””&gt;&lt;meta charset=”descrption”content=””&gt;&lt;meta charset=...
复制链接

扫一扫