HTML前端笔记

目标是成为IT行业大师

已于 2023-12-14 15:50:36 修改

阅读量1k

点赞数 29

文章标签：前端 html 笔记

于 2023-12-14 11:15:04 首次发布

本文链接：https://blog.csdn.net/a969667/article/details/134990840

版权

《前端》笔记1

HTML是超标签语言
“！+tap“----自动生成初始程序
网页编码格式：
1.UTF-8：通用字符集
2.GB2312：简体中文字符集
3.BIG5：繁体。。。
4.GBK：GB2312的补充

<!DOCTYPE html>-----声明一个html文档
<html lang="en">----
<head>----网页头部的开始
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>第一个页面</title>
</head>----网页头部的结束
<body>----网页内容的开始
哈哈哈
粗体
粗体
斜体
斜体
下划线
<del>删除线</del>
</body>----网页内容的结束
</html>

《前端》笔记2

1.P标签：段落标签。（align 属性：可设置位置如【----居左】）center

2. font标签：设置字体。【color 属性：可设置字体颜色（font color = "bule"）(颜色表示法：1.英文单词。2.#rrggbb 三原色--- 如（= “00ff00”为绿色）) 3.rgba法】
注：【颜色表示法第二种可在网上搜索颜色十六进制表】

3.sub,sup,pre,span标签
sup:上标
sub：下标
pre：原样输出
span：行内标签---修饰文本
【style属性】如

4.hn，div标签
hn：n可变，指数字1，2，3 n=1是最大---标题标签
div：块级标签---”盒子布局“

行内标签：不能自动换行
块级标签：自动换行，独占一行 div，hn，p，hr

5.特殊字符
如空格---&nbsp（转义码）---四个&nbsp表示一个汉字页面空间
ex:
<---&lt >---&gt ¥---&yen “---&quot ©---&copy ®---&reg
±---&plusmn ÷---&divide ‰---&permil

6.表单标签
form标签：【一般与input标签连用】
input标签：输入标签
input---语法格式
<input type="表单元素（text，password...）">
【action属性---跳转到相应路径】
【name属性---表单名称】
【get请求：将输入信息表示在网址栏】
【method属性---用来明确表单提交的方式get post，默认为get，设计时一般设置为post】
绝对路径：如C:\Users\29222\Desktop\前端\第二天\day.html
相对路径：目标源文件，如第二天\day.html

7.表单元素
文本框密码框按钮下拉列表框
text---文本       password---密码       submit---提交按钮   button---普通按钮
radio---单选按钮（按钮中的name属性必须相同）   checkbox---多选按钮   reset---重置按钮
image---图像按钮       file---文件       hidden---隐藏域       email---邮箱（邮件地址）
color---颜色域       date---日期       time---时间       datetime-local---日期+时间
range---范围（进度条）
一般是由input textarea select 标签构成，都需要使用在form标签里面

《前端》笔记3

w3school.com.cn---学习网站

1.常见属性
readonly---只读：字段只能读不能改 checked---默认选择 disabled---禁用不能点击
autofocus---默认光标位置 required---不能空白提交

2.select标签（用在form标签中）
select下拉列表框标签---一般与option连用
selected属性---默认被选中的选项（option） multiple属性---列表形式展示（select）

3.textarea标签
用来显示文本域
属性：cols---多少列，宽度 rows---多少行，高度

4.a标签---超文本链接跳转
可用锚点：在href中写入”#+id名称”------id属性运用在要跳转的地方的a标签中---多用于小说目录与内容的跳转
属性1：
href---放入要跳转的网址
target---网页跳转方式
属性2：
vlink---访问过的超文本链接的颜色
alink---激活时的超文本链接的颜色
link---访问前链接颜色
text---文本颜色
bgcolor---背景颜色
background---背景图片
注：【以上标签加在body中】

5.弹幕设置（过时版）
direction------表示滚动的方向，值可以是left，right，up，down，默认为left
behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
loop-----表示循环的次数，值是正整数，默认为无限循环
scrollamount-----表示运动速度，值是正整数，默认为6
scrolldelay----表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
align-----表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width------表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度
hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start()------表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
ex1：
<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> <marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
<marquee scrollamount="100">我速度很快.</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

ex2：

<marquee>
<img src="图片1.png" alt="" width="200px" height="200px">
</marquee>
<marquee behavior="alternate">
<img src="图片1.png" alt="" width="200px" height="200px">
</marquee>
<marquee behavior="scroll">
<img src="图片1.png" alt="" width="200px" height="200px">
</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>
<marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
<marquee scrollamount="100">
<img src="图片1.png" alt="" width="200px" height="200px">
</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

6.img标签
图片标签---图片常见格式：GIF JPG PNG BMP
属性：   src---图片路径               alt---代替图片内容，用文本描述代替（图片加载出不来）
   width---图片宽度               height---高度
   border---边框【默认值为0，值代表边框粗细】   title---图片的标题
   align---设置图片位置（图片与文字的位置）
   【align中取值：top---上对齐（与文字）   bottom---下对齐【默认对齐】   middle---居中对齐   left---左对齐   right---右对齐】
注：【宽度，高度单位为像素px或者%】