HTML+CSS学习随记
- 前后端
- 2024-03-17
- 114热度
- 0评论
HTML基本结构
示例1
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
1.这是 HTML 4.01 的文档类型声明，表示该文档遵循 HTML 4.01 标准。它告知浏览器页面的解析方式
<html lang=\"zh\">
2.指定文档的主要语言是中文。lang=\"zh\" 对 SEO 和屏幕阅读器有帮助。
3.head部分包含文档的元数据（metadata），如文档字符编码、标题、样式表和脚本等。这部分不会直接显示在网页上，但它影响页面的显示方式和功能。
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
3.1 meta标签：用于定义页面的字符集、视口设置、作者信息等。
<title>网页标题</title>
3.2 title标签：设置网页的标题，显示在浏览器的标签栏中。
<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">，这种方式是
使用的包含外部样式，还可以使用在 <head> 中使用 <style> 标签来包含内部样式。
3.3 link标签：用于链接外部资源，如 CSS 样式表。
<script type=\"text/javascript\" src=\"script.js\"></script>
3.4 script标签：引入外部 JavaScript 文件，或内嵌 JavaScript 代码。
</head>
4. body部分包含了网页的实际内容，如文本、图片、链接等。所有用户在浏览器中看到的内容都位于body标签内。
<body>
<div id=\"header\">
<h1>欢迎访问我的网页</h1>
</div>
4.1 div标签：用于定义网页的不同区域。虽然 HTML4中没有HTML5 的语义化标签（如 <header>, <footer> 等），但<div>是常用的布局元素。
4.2 h标签：定义标题，<h1> 是最高级别的标题，数字越大，标题级别越低。对于页面结构和 SEO 来说，合理使用这些标签有助于提高页面的可读性和搜索引擎的抓取。
<div id=\"nav\">
<ul>
<li><a href=\"#home\">首页</a></li>
<li><a href=\"#about\">关于</a></li>
<li><a href=\"#services\">服务</a></li>
</ul>
</div>
4.3 ul标签：表示无序列表，<li> 表示列表项。在HTML4中，常常使用这种方式来创建导航菜单。
<div id=\"content\">
<p>这是网页的主体内容。</p>
</div>
4.4 p标签：定义段落，通常用于包含一段文本。
<div id=\"footer\">
<p>© 2024 我的公司</p>
</div>
</body>
5. 属性：在标签里面的如name,id,src，href这些都是标签的属性。属性是附加在 HTML 元素上的信息，用于修改或指定元素的行为和外观。属性总是写在开始标签内，并且以键值对的形式存在。属性可以控制元素的某些特性（如样式、链接、身份、动作等）。
6. 标签和元素的概念与区别
6.1 标签是是 HTML 语法中用于定义元素的标记，通常由尖括号包围，并且具有起始标签和结束标签。标签是构成HTML元素的基本单元。
6.2 元素是由标签、内容、以及可能的属性组成的完整结构。可以认为，标签是元素的一部分，元素包括了标签本身以及它的内容和属性。
</html>
主要构成有：
- 文档类型声明!DOCTYPE>
- HTML根元html
- 头部head： 包含页面的元数据，例如字符编码、页面标题、样式等。
- 主体body：包含网页的实际内容和展示。
在HTML网页制作中，CSS和JS有着重要的作用。
- CSS主要用于网页的 样式设计 和 布局控制。通过 CSS，开发者可以控制网页的外观，包括字体、颜色、尺寸、位置、布局等。
- JavaScript 是一种 编程语言，主要用于网页的 交互功能 和 动态效果。它使得网页能够响应用户的操作，实现动态内容、表单验证、动画效果等。
对于CSS 引入有以下3中方法：
- 内联样式：<p style=\"color:red;\">
- 内嵌样式：<style> 标签放在 <head> 中
- 外部样式：使用 <link> 标签引入 .css 文件
对于JavaScript 引入，有以下3中方法：
- 内联 JavaScript：直接写在 HTML 标签事件中（如 onclick）
- 内嵌 JavaScript：<script> 标签放在 <head> 或 <body> 中
- 外部 JavaScript：使用 <script src=\"script.js\"></script> 引入外部 .js 文件
示例2
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>HTML4 示例页面</title>
<!-- 内部CSS样式 -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
h1 {
font-size: 2em;
}
.container {
width: 80
margin: 0 auto;
padding: 20px;
}
p {
font-size: 1.2em;
}
/* 外部CSS样式的链接 */
@import url(\'styles.css\');
</style>
<!-- 引入外部JavaScript文件 -->
<script src=\"scripts.js\" type=\"text/javascript\"></script>
</head>
<body>
<header>
<h1>HTML4 示例页面</h1>
</header>
<div class=\"container\">
<p>欢迎来到我的网站！这是一个简单的 HTML4 示例页面。</p>
<!-- 有序列表 -->
<ol>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
</ol>
<!-- 表单 -->
<form action=\"submit_form.php\" method=\"post\">
<label for=\"name\">名字：</label>
<input type=\"text\" id=\"name\" name=\"name\" required>
<br><br>
<label for=\"email\">邮箱：</label>
<input type=\"email\" id=\"email\" name=\"email\" required>
<br><br>
<button type=\"submit\">提交</button>
</form>
<p>这是一个链接：<a href=\"https://www.example.com\" target=\"_blank\">访问 Example 网站</a></p>
<!-- 图片展示 -->
<img src=\"example.jpg\" alt=\"示例图片\" width=\"300\">
<button onclick=\"changeBackgroundColor()\">点击我改变背景色</button>
</div>
<script>
// 外部JavaScript文件会包含一些交互功能
function changeBackgroundColor() {
document.body.style.backgroundColor = \'#ffcccc\';
}
</script>
</body>
</html>
HTML简单入门
超文本标记语言
1. 标题
1.1 一级标题
<h1> xxxx < /h1>
1.2 二级标题
<h2> xxxx < /h2>
2.段落
<p> xxxx < /p>
3.插入图片
绝对地址方式：<img src=\"路径/xxx.jpg\"> ---效率更高点
相对地址方式：<img src=\"路径/xxx.jpg\" />
重要概念
标签
从哪里开始，哪里结束
单标签：开始 <h1>， 结束</h1>
双标签：格式<img src=\"xxx/xxx.jpg\" />, /结束标签
标签属性
标签要设置的属性
标签属性： <img src=\"xxx.jpg\" />, src就是属性
id属性： <p id=\"zansan\">,可用于区分这个标签与其他标签
class属性： <p class=\"xxx\">,用于分类，常用CSS搭配使用。
title属性： <button title=\"Click me\">Submit</button> 描述了元素的额外信息 (作为工具条使用)
style属性：规定元素的行内样式（inline style）
元素
由标签、内容、以及可能的属性组成的完整结构。可以认为，标签是元素的一部分，元素包括了标签本身以及它的内容和属性。元素以开始标签起始，结束标签终止。下面整个就是一个元素。
<h1> xxx < /h1>
乱码问题解决
编码、解码，网页乱码，查看文档源码乱码，UTF-8/ANSI/unicode,编码和解码格式要对应，否则显示异常,告诉浏览器当前使用的编码方式，如UTF-8。
常用标签
不同的标签，属性不一样，但是有一些公共属性，如id，class。
标题标签
下面是标题标签样式。
<h1>xxx< /h1>
<h2>xxx< /h2>
<h3>xxx< /h3>
<h4>xxx< /h4>
<h5>xxx< /h5>
段落标签
下面是段落标签
<p> xxx </p>
图片标签
<img src=\"xxx\" alt=\"xxxx\">
alt表示图片无法显示时，就显示什么文字；另外作用还可以告诉搜索引擎，图片内容是什么。
链接标签
<a href=\"https://www.baidu.com\">百度</a>
列表标签
有序列表
<ol>
<li> </li>
<li> </li>
</ol>
无序列表
<ul>
<li> </li>
</ul>
布局标签
div
div是一种块级元素（block-level element），用于对文档进行分组并添加样式或结构。div是“division”的缩写，表示页面中的一个逻辑分区或区域。它本身没有特定的语义含义，主要用于布局和样式设计。
<div id=\"container\" style=\"width:500px\">
<div id=\"header1\" style=\"background-color:#FDDDDD;\">
<p style=\"margin-bottom:0;\">标题</p>
</div>
<div id=\"menu\" style=\"background-color:#AFD700;height:200px;width:100px;float:left;\">
<b>菜单</b>
</div>
<div id=\"content\" style=\"background-color:#EEEEEE;height:200px;width:400px;float:left;\">正文</div>
<div id=\"footer1\" style=\"background-color:#FFA500;clear:both;text-align:center;\">Footer</div>
</div>
示例效果如下：
![\"\"](\"https://www.laumy.tech/wp-content/uploads/2024/12/wp_editor_md_fd78c12748178efbf3a6f8d92d48ebba.jpg\")
span
span标签是一种内联元素（inline element），用于对文档中的文本或部分内容进行分组，通常是为了应用样式或附加特定的属性。与 div 标签不同，span不会自动创建新的行，因此适合用于不影响文档流的情况下包裹文本或其他内联元素。
<p>这是一个
<span style=\"font-weight:bold\">网页</span> 的
<span style=\"font-style:italic\">测试</span>，
这是我的
<span style=\"background-color:yellow\">博客</span>
<a href=\"https://www.laumy.tech\">
<span style=\"color:red; text-decoration:underline\">Laumy的技术栈</span>
</a>
</p>
示例如下：
![\"\"](\"https://www.laumy.tech/wp-content/uploads/2024/12/wp_editor_md_6bb3047c786723bba2d0fc3c51068fdb.jpg\")
常用元素
块级元素
<p>xxx</p> 可以换行
<div></div>
行内元素
<strong>xxx<strong>突出内容
注意的包含规则：
- 元素之间时可以相互嵌套
-
块级元素可以包含其他的行内元素
-
行内元素只能包含数据和其他行内元素
-
p元素不要包含其他块级元素
参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
CSS
想要对某个内容做样式，就需要先找到着力点，也就是要先选中内容；若有块元素标签如p等，就可以在属性直接描述，要是没有的话就用span包起来。
CSS的语法如下：
选择器{
属性名: 属性值;
属性名: 属性值;
}
选择器代表页面上的某类元素，选择器后一定是大括号。属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。属性名和冒号之间最好不要有空格（经验）。如果一个属性有多个值的话，那么多个值用 空格 隔开。
（1）用span标签把内容包起来,表示要处理的内容，然后用属性如style描述。
<span style=\"font-weight:bold\"> </span>
（2）p元素中的样式，如
<p style=\"xxxx\"> </p>
（3）用class归类，在head内容中统一处理
<!DOCTYPE html>
<html lang=\"en\">
<head>
<style>
.jiacu {
font-weight:bold
}
</style>
</head>
<body>
<p class=\"jiacu\"> xxxxx </p>
<p class=\"jiacu\"> xxxxx </p>
</body>
</html>
CSS的三种方式
1. 内联样式（style标签属性）：<p style=\"color:red;\">
2. 内嵌样式（head+ style + class的方式）：<style> 标签放在 <head> 中
3. 外部样式：使用 <link> 标签引入 .css 文件
引用外部CSS文件的方式
（1）创建一个xxx.css
@charset \"UTF-8\";
.jiacu {
font-weight:bold
}
(2) 在html文件中引用
<link rel=\"stylesheet\" href=\"http:xxxx/xxx.css\">
CSS选择器
id选择器
id 选择器可以为标有特定id 的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"#\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" 来定义。以下的样式规则应用于元素属性 id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"para1\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\":
#para1
{
text-align:center;
color:red;
}
![\"\"](\"https://www.laumy.tech/wp-content/uploads/2024/12/wp_editor_md_6260950c5217a3c492f1e08729bac483.jpg\")
注意id不要以数字开头，有些浏览器有兼容性问题。
class选择器
.center {
text-align:center;
}
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
![\"\"](\"https://www.laumy.tech/wp-content/uploads/2024/12/wp_editor_md_5a8677cb76292ba898767a755f509d10.jpg\")
通用选择器
p { ---选中所有的p元素
font-style:italic
}
通配符*选择器
*{
margin-left:0px;
margin-top:0px;
}
通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
后代选择器
通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。如下代码，div p 选择器将选择所有在 div 元素内的 p 元素。
样式
div p {
font-weight: bold;
}
body代码
<div class=\"container\">
<p class=\"top-left\" id=\"device-id\"></p>
<p class=\"top-right\" id=\"status\">waiting</p>
</div>
上面的div p只对div中的p有效。
伪类选择器
CSS 伪类选择器（Pseudo-classes）用于选中元素的特定状态或特征，而不是通过常规的元素类型、类名或 ID 来选择。伪类使得你能够更精确地应用样式，比如当用户悬停在元素上、输入框为空、或元素处于被选中状态时，才应用样式。伪类通常以 : 符号开始。下面列出了一些常见的 CSS 伪类选择器及其使用方法。
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
CSS文本样式
.xxx {
color：red； --颜色
font-size:12px; --大小
font-weight:normal --粗细
text-decoration：underline; --画线，如下划线
line-height:20px; --行高
font-family:\'Arial Narrow\'; 字体格式
}
CSS盒子模型
浏览器把html元素当成一个一个盒子，对一个盒子来设置其样式。
.test {
border-top:2px solid blue;
border-left:3px solid green;
border-right:3px solid yellow;
border-bottom:2px dashed red;
padding-top:10px;
......
}
CSS总结
- CSS样式和html标签总结
- 选中要样式的内容，选中方法有 标签，盒子。
- 标签的作用：逻辑结构的作用，控制支点的作用（标识出来）
- span和div像是购物袋的作用，打包标识起来。
参考：