刚接触html,刚开始学习前端知识
<!doctpye html>---声明一个html文档
<html lang="en">---网页开始的部分
<head>---网页头部的开始
<title> 标题 </title>---网页标题
</head>---网页头部的结束
<body>---网页内容开始的部分
内容
</body>---网页内容的部分
</html>
注释格式为:<!--注释的部分 --> 快捷键 ctrl+/或ctrl+shift+/
编码格式
GB2312---简体中文字符集
UTF-8-- 通用字符集
BIG5--繁体字符集
GBK -- 汉字内码扩展规范
常见标签
<strong>内容 </strong> 加粗字体
<b> </b>也是粗体
<em> </em>斜体
<i> </i>斜体
<u> </u>下划线
<br> 换行
<hr> 水平分割线 (可以更改属性列如<hr width="800px" size="10"> 就是八百像素的长度,10单位的粗细)
<p> </p>段落标签 两个相邻的p标签中间会空一行
(属性 align属性 列如agin=“left/center/right”居左居中居右)
<font> </font>
(color属性:颜色 列如 color=“006677” 三原色表达rgb(十六进制))
<sub></sub>--下标标签 列如数组a的下标是b a<sub>b</sub>
<sup></sup>--上标标签 列如 二的三次方2<sup>3</sup>
<pre></pre>--原样输出 怎样打的就怎样输出
列如<pre>
xxxx
xx
xxxx xxxx
xxxx xxxx
</pre>
<span></span> 行内标签用来修饰文本内容 可以加属性列如(<span style:"color:aqua;" font></span>)
<hn> </hn> n的取值为1到6 从一到六越来越小 默认加粗 例如 <h1></h1><h2></h2>
<div></div> 块级标签 自动换行 如(<div><hn><p><hr>)注()
表单标签
form 标签 一般会和 input标签 连用
列如 <form action="跳转路径">
用户名<input type="text"> <br>
密码<input type="password">
<input type="submit">
</form>
<form action="..\第一天\demo.html" method="post" name="gggg">
用户名:<input type="text" name="text"><br>
密码:<input type="password" name="password"><br>
<input type="submit">
</form>
绝对路径 : 从盘符到文件名称的全部 C:\Users\zhao\Desktop\学习HTML\第一天\demo001.html
相对路径 : 当前源文件和目标文件的相对路径 ..\第一天\demo001.html
method 表单提交方式 post get 默认是get(get会把用户请求的内容暴漏再地址栏上 post:相较于get比较安全)
name 表单的名字
form表单由 input textarea select 标签构成,需要放在form当中
input(但标签)标签语法:
<input type="元素类型" name="元素名称" value="“ id="">
type属性的取值
text--文本框
password--密码框
radio--单选按钮
checkbox--多选按钮
submit--提交按钮用value 改名字
reset--重置按钮 value 改名字
button--普通按钮
2023.12.10
image--图像按钮 src属性 给图片路径(input type="image" src="图片路径")
file--文件域 提交文件的
hideen--隐藏域 看不到但后台可以看到value属性返回的值
email-- 邮箱 value属性值可以显示在页面中的文本框中
color--颜色域 可以在页面上出现一个色块(可以选择颜色)
date-- 日期 可以选择日期
time-- 时间 可以选择时间
datetime--日期加上时间
range--进度条(手动拖动的)
input 常用属性 checked
checked--默认选择
readonly--只读 只能浏览不能写入
disabled--禁用
autofocus--默认光标位置
required--不能空白提交
select标签 --下拉列表框(也是放在form里面的)
select与option标签连用
例如
<selcet id="" name="">
<option value=""> </option>
selected--属性默认被选中的选项
multiple--以列表的属性展示
textarea标签(也是放在form当中)
用来实现文本域
cols--文本多少列,用于显示为文本的宽度
rows--文本多好行 用于显示文本的长度
列如<textarea name="" id="" rows="" cols=""></textarea>
常见属性
<a></a>标签 超文本链接标签-- 用来页面跳转
href属性跳转路径 列如(<a href="跳转链接">文本</a>
注:可以与id连用做锚点 类如(<a href="#+id名字">)
vlink--访问过后超文本的颜色
link--超文本的颜色
alink--激活超链接文本时颜色
text--文本颜色
bgcolor--背景颜色
background--背景图片 列如(backgrond="图片路径")
注意: 可以放在body当中
target属性(列如<a href="跳转链接" target="_blank"></a>)
属性值
_blank--在新窗口打开链接
_self --默认,在相同框架打开链接
_parent 在父框架打开
贪色表示方法
1.英文单词
2.#rrggbb
3.rgba(255.255.255.255)a表示透明度
2023.12.17
img标签--图片标签
常见图片格式:GIF JPG PNG BMP 等
常见属性
src属性--图片路径(分为绝对路径和相对路径)
alt属性--代替图片文本内容(因图片显示不出来,就用显示这给文本)
width属性--宽度
heigt属性--高度
border属性--边框(border=“x” ,x为0则无边框,x越大边框越大)
align属性--位置(图片和文字的位置)列如 ailgn=“top”
top取值--上对齐
middle取值--中对齐
bottom取值--下对齐(默认对齐)
left取值--左对齐
right取值--右对齐
title属性--图片的标题
mpa标签
name属性--表述图片的名字
area标签(在map中使用)
shape属性--鼠标点击的形状
circle 取值--圆形区域
default取值--整个图形
rect取值--矩形区域
poly取值--多边形区域
coords属性--鼠标点击形状的大小
href属性--跳转的路径
列如:
<img src="C:\Users\zhao\Desktop\学习HTML\第四天\OIP-C (13).jpg" alt="全成就" title="全成就" usemap="#全成就">
<map name="全成就">
<area shape="circle" coords="90,75,100" href="demo2.html">
</map>
多媒体标签
audio标签--音频
src属性--引用路径
controls属性--播放器组件
autoplay属性--自动播放(大部分浏览器不支持这个属性值)
loop属性--循环播放
video标签--视频
src属性--引用路径
controls属性--播放器组件
autoplay属性--自动播放(大部分浏览器不支持这个属性值)
表格布局(表格里面可以嵌套表格)
table标签
border属性--边框属性
width属性--宽度 单位px
height属性--高度 单位像像素(px)
bgcolor属性--背景颜色
background属性--背景图片
cellpadding属性--表格边距(单元格与表格之间的距离)
cellspcing属性--表格间距(单元格和单元格之间的距离)
默认的边距和间距的取值为两像素(2px)
align属性--位置
center取值--居中对齐
left取值--左对齐
right取值--右对齐
注:以上属性可以写在 <tr>与<td>当中
包含 (thead tbody tfoot)
thead标签--表头
tbody标签--表身体(tr写在这里面)
tr标签--第几行(td写在这里面)
td标签--第几列
tfoot标签--表尾
表格的合拼
td标签
rowspan属性--表示在单元格上垂直方向上去跨行(合并行)
colspan属性--表示在单元格上水平方向去跨列(合拼列)
列如<td rowspan="2" colspan="3"></td>
2023.12.22
ol标签--有序列表
type属性--设置序号属性,以数字展示
取值有(‘1’,‘a’,‘A’,‘I’---等等)
start属性--从那个序号开始取值排序
reversed属性--降序排列
li标签-- 列表
使用方法: <ol type="1">
<li>qianduan</li>
<li>qianduan</li>
<li>qianduan</li>
<li>qianduan</li>
<li>qianduan</li>
</ol>
ui标签--无序列表
type属性--无序列表的样式 disc(默认取值 实心圆) square(实心方框)
列如:
dl标签---数据列表
dt标签(标题)
dd标签(内容)
frameset-- 多窗口框架(一个页面可以显示多个窗口) 注意:(不能和body标签连用)
frame标签
src属性--路径
cols---定义页面列方向的尺寸或数目
2023.12.22
HTML第二部分
CSS部分
w3c--word wide web consortium
结构层:HTML
表现层:CSS
行为层:javascript-----JS(按钮 动画 事件 窗口等一些等动态效果)
注释使用:ctrl+/(?号的那个键)
层叠样式表-CSS
行内样式:通过style属性
内嵌样式:通过style标签
外链样式:通过link标签
导入样式:通过@import url("css文件的路径(使用\号)"),但是注意放到style标签里面
行内标签
通过style属性
列如<body>
<h1 style=“color: blueviolet;font-size: 12px">这是行内样式</h1>
</body>
内嵌样式
列如
head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: black;
font-size: 80px;
}
</style>
</head>
<body>
<h2 >这是内嵌样式</h2>
</body>
外嵌样式
列如
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<link rel="stylesheet" href="css\demo05.css">
</head>
<body>
<g>这是外链样式
</g>
<b>这也是外链样式</b>
</body>
demo05.css里面的
g{
color: brown;
font-size: 90px;
}
b{
color: pink;
font-size: 120px;
}
导入样式
列如
@import url("../第五天/css/demo05.css");
四种样式方式顺序
就近原则:距离修饰标签的距离越近优先级就越高
选择器(都可以写在xxx.css文件里面 通过外链样式使用)
基本选择器:标签选择器,id选择器,类选择器,通用选择器
标签选择器:通过标签的名称进行获取
div标签--(用法和内嵌式差不多)
id选择器:通过获取标签的id属性
给body里面的标签里的id属性:
列如
#id名{}
类选择器:通过获取标签clss属性:
和id选择器用法差不多
列如
.class名()
通用选择器:
列如 *{}
四种的顺序
id>class>标签>通用选择器
包含选择器
子代选择器--获取的是某个标签的第一级子标签
div.list> ul{
border: 1px solid blueviolet ;
}
后代选择器--获取的是某个标签的所有子标签
列如:
div.list li{
border: 1px solid pink;
}
分组选择器--逗号选择器,可以同时设置多个标签
列如
a,b,h1
{
color: aqua;
border: 1px solid black;
}
属性选择器
选中有某个属性的标签
类如
<style>
div[id]
{
color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<div title> shux</div>
<div id>shux </div>
</div>
</body>
确切的等于某个值
标签名(可以写也可以不写)[class="id"]{
color: aqua;
border: 1px solid black;
}
属性包含某个值
列如
标签名[type *="e"]{ color: aqua;
border: 1px solid black;
}
属性以什么为开头
标签名[属性 ^="属性值"]{
color: aqua;
border: 1px solid black;
}
属性以什么结尾
标签名[属性 $="属性值"]{
color: aqua;
border: 1px solid black;
}
表示下一个标签()
标签 +p(p为下一个标签名字或者是class名){
border: 1px solid black;
}
类如 .id +.id{
color: aqua;
border: 1px solid rebeccapurple;
} 注:但只有第二class为id被选择了。 (.id +div +div还可以再后面再加一个标签名 就是选中下下个标签)