526互联

HTML+CSS随笔

发布时间 2023-10-06 22:18:17作者: VictoryHan

这是我的学习笔记，重点是我容易忘的内容，并不全面
配合以下内容学习就很全面了
黑马程序员pink老师前端入门教程

HTML

HTML文件基础结构解析

<!DOCTYPE html>
<html lang="zh-han">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE>声明位于文档中的最前面位置，处于<html>标签之前，但它本身不是一个HTML标签，他就是文档类型声明标签。
例：<!DOCTYPE html>这句代码意思就是采用的HTML5来显示网页


lang用来定义当前文档显示的语言，en定义网页语言为英语，zh-CN定义网页语言为中文。


<meta>元数据（metadata）是关于数据的信息。标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。


Character set(字符集),可通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码。
charset常用的值由：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用的字符。字符集一定要设置，否则可能会引起乱码。一般情况下，建议使用UTF-8编码，尽量写成UTF-8,不要写成utf8或UTF8。

name和content,一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。简单来说，name值是内容类型，content是具体的值。例：

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

下面的meta元素针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

特殊字符

特殊字符

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
实例：

<table>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

img

在此基础上，<th>则可以表示表头，<thead>表示表格头部，<tbody>表示表格主题，以上3个标签其实显示效果没有明显差别，有助于结构划分。

  • <table>标签

常用属性：

align:表格的对其当方式，参数：left、center、right。

border:表格是否有边框，参数：1（有）或 0（没有）。

cellpadding:单元格内容与单元格边框之间的距离，单位为像素。

cellspacing：单元格之间的距离，单位为像素。

width：单元格宽度，单位为像素。

height单元格高度，单位为像素。

  • 单元格合并

跨行合并：rowspan="合并单元格的个数"；要合并的单元格中，最上侧单元格为目标单元格，写合并代码。

跨列合并：colspan="合并单元格的个数"；要合并的单元格中，最左侧单元格为目标单元格，写合并代码。
img

合并步骤：先确定是跨行合并还是跨列合并-->找到目标单元格，写上合并方式=合并的单元格数量-->删除多余的单元格

<table border="1" cellspacing="0" align="center" width="500" height="249">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 3</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
    </tr>
</table>

img

<table border="1" cellspacing="0" align="center" width="500" height="249">
    <tr>
        <td>row 1, cell 1</td>
        <td colspan="2">row 1, cell 2</td>
        <td>row 1, cell 3</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
    </tr>
</table>

img

<table border="1" cellspacing="0" align="center" width="500" height="249">
    <tr>
        <td>row 1, cell 1</td>
        <td colspan="2">row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
    </tr>
</table>

img

列表

  • 无序列表
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

img

  • 有序列表
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

img

  • 自定义列表
    在HTML标签中,<dl>标签用于定义描述列表（或定义列表）,该标签会与 <dt>（定义项目/名字）和dd（描述每一个项目/名字）一起使用。
<dl>
    <dt>列表项1</dt>
    <dd>列表项2</dd>
    <dd>列表项3</dd>
</dl>

img

表单

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
img

表单控件中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

主要类型：

  1、input输入表单元素
img

img

<form   action="http://localhost" method="post" name="name1">
<!--    text 文本框 用户可以在里面输入任何文字-->
<!--    maxlength 规定输入的最大字符数-->
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!--    name 是表单元素名称 单选按钮和复选复选框各自不同项此属性必须保持一致-->
<!--    value 是input元素的值-->
<!--    name和value 是提供给后台服务器的，主要给后台开发人员看-->
<!--    password 密码框 用户看不见具体输入的值-->
    密码：<input type="password" name="password"><br>
<!--    radio 单选 按钮可以实现多选一-->
<!--    单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮-->
   性别:男<input type="radio" name="sex" value="man" checked="checked"> 女<input type="radio" name="sex" value="woman"><br>
<!--    checkbox 复选框 可以实现多选-->
   爱好：吃饭<input type="checkbox" name="hobby" value="eating" checked="checked">睡觉<input   checked="checked" type="checkbox" name="hobby" value="sleping">看电影<input type="checkbox" name="hobby" value="watching movie"><br>
<!--    点击了提交按钮，可以把表单域form里面的表单元素里面的值 提交给后台服务器-->
    <input type="submit" value="提交">
<!--    重置按钮可以还原表单元素初始的默认状态-->
    <input type="reset" value="重新填写">
<!--    普通按钮button 后期搭配js脚本使用-->
    <input type="submit" value="获取短信验证码"><br>
<!--    文件域 使用场景:上传文件使用的-->
    上传头像:<input type="file">
</form>

img

label标签

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者对应的表单元素上，用来增加用户体验。
语法

性别:
    <label for="nan">男</label>
    <input type="radio" name="sex" value="man" id="nan" checked="checked">
    <label for="nv">女</label>
    <input type="radio" name="sex" value="woman" id="nv"><br>

<label>标签的for属性应当与相关元素的id属性值相同

  2、select下拉表单元素

<form   action="http://localhost" method="post" name="name1">
<!--<select>中至少包含一对<option>-->
<!--在<option>中定义selected = “selected”时，当前项即为默认选中项    -->
    籍贯:
    <select>
        <option>山东</option>
        <option>河南</option>
        <option>河北</option>
        <option>天津</option>
        <option>北京</option>
        <option>云南</option>
        <option selected="selected">深圳</option>
        <option>香港</option>
        <option>黑龙江</option>
    </select>
</form>

img

  3、textarea文本域元素

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法:

<form   action="http://localhost" method="post" name="name1">
    今日反馈:
    <textarea cols="50" rows="5">cols 是规定一行的字数，rows是规定显示的行数，多出的行数需要滚动条滑动
    </textarea>
</form>

img

CSS

HTML中引入CSS的方式

  • 内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

  • 嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例：

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

  • 链接方式

链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。

示例：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

  • 导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
    @import url(style.css);
</style>

CSS选择器

基础选择器（由单个选择器组成）:标签选择器、类选择器、id选择器和通配符选择器

  • 标签选择器：html标签名作为选择器，选中页面中所有的此标签。

  • 类选择器:选中所有相同类的标签。(需要在html标签中加上类名，多个类名之间用空格隔开)
    语法:

.类名 {

}
  • id选择器:选中所有相同id的标签。（需要在html标签上加上id）
    语法:
#id名 {

}
  • 通配符选择器:使用*定义，它表示选取页面中所有元素（标签）。
    语法:
* {


}

复合选择器

  • 后代选择器
    又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2(后代元素)。

例如：

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1和元素2中间用空格隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

  • 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

语法：

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。

例如：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其孙子、重孙之类都不归他管,你也可以叫他 亲儿子选择器

  • 并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和 元素2。

例如：

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和 元素2 中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

  • 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等。

链接伪类选择器

链接伪类选择器注意事项:

  1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

  2. 记忆法：love hate 或者 lv 包包 hao 。

  3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

例如：

/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

例如：

input:focus {
background-color:yellow;
}

CSS字体属性：

  • CSS字体复合属性
font: font-style font-weight font-size/line-height font-family;

注意: 以上顺序不可变，必须严格遵守。不需要设置的属性可以省略（系统会取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

  • CSS字体属性总结
    img

CSS文本属性

  • 装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
img

  • 文本缩进
    text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。正值是缩进，负值是突出。

这边有一个常用的单位：em
em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

示例：

p {
    text-indent: 20px;
}

  • 行间距
    line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

  • 文本属性总结
    img