关于学习html的上课经验自我总结记录-CSDN博客

本文链接：https://blog.csdn.net/zwdxkskz/article/details/136281124

本文详细介绍了HTML的基本结构、常用的标签、CSS样式应用、表单元素、多媒体元素以及表格布局，包括W3C标准和JavaScript行为层的概述，为初学者提供了一个全面的HTML和CSS入门教程。

摘要由CSDN通过智能技术生成

<!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>

绝对路径：从盘符到文件名称的全部 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--普通按钮

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>

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---定义页面列方向的尺寸或数目

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;

}