HTML笔记

Escape_LQW

已于 2022-11-22 23:08:12 修改

阅读量1.5k

点赞数

文章标签： html 前端 css 1024程序员节

于 2022-10-20 09:34:06 首次发布

本文链接：https://blog.csdn.net/Escape_LQW/article/details/127335707

版权

HTML学习记录

一级目录
- 二级目录
- - 三级目录
一.初识前端web

一级目录

二级目录

三级目录

一.初识前端web

一.什么是HTML CSS？

是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码？在网页空白处，鼠标右键— 点击查看网页源代码即可或CTRL+u

二.使用软件star.

使用Visual-studio code编辑器

三.web三大核心技术

结构+样式+行为
HTML
CSS
Javascript

四.HTML基本结构和属性

超文本标记语言
超文本：文本内容+非文本内容（图片，视频，音频)
标记：<单词>
语言：编程语言
HTML常记标签 https://blog.csdn.net/zonxxx/article/details/107696507
标签属性：来设置标签的，设置标签的一些功能
<标签属性=“值”属性2=“值2”>

五.HTML初始代码

每个.html文件都有代码叫做初始代码，要复合html文件规范写法。
!+tab:快捷创建html的初始代码

 <!DOCTYPE html>                        文档声明：告诉浏览器这是一个html文件
<html lang="en">                            html文件的中最外层标签：包裹着所有html标签代码
<head>
    <meta charset="UTF-8">            元信息：是编写网页中的一些赋值信息
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 设置网页的标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    显示网页内容的区域
</body>
</html>

六.HTML注释

写法：<！–注释的内容–> 在浏览器中看不到，只能在代码中看到注释的内容。
意义：

1.把暂时不用的代码注释起来，方便以后使用。

2.对开发人员进行提示。

快捷添加注释与删除注释：

1.`ctrl`+`/`

2.`shift`+`alt`+`a`

七.HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处：

1.在没有css的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器，盲人阅读器等）。
4.便于团队开发与维护。

八.标题与段落

标题 -> 双标签：<h1></h1> ... <h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标题，
h5,h6标签在网页中不经常使用。
段落 ->双标签：<p></p>

九.文本修饰签

强调-> 双标签：<strong></strong>，<em></em>
区别：
1.写法和展示效果是有区别的，一个加粗，一个斜体，
2.strong的强调性更强，em的强调行稍弱。
下标：<sub></sub>
上标：<ins></ins>
size:设置字体大小
color:设置字体颜色
face:设置字体
<i>:显示斜体文本效果
<b>:呈现粗体文本效果
<small>:呈现小号字体效果
<big>:呈现大号字体效果

注：一般情况下，删除文本都是和插入文本配合使用的。

十.图片标签

img->单标签
src:引入图片的地址。
art:当图片出现问题的时候，可以显示一段友好的文字。
title:提示信息。
width，height:图片的大小。

十一.路径的引入

1.相对路径可以用/也可以用\，规范用/
2.绝对路径用/

十二.链接标签

a->双标签<a></a>
href属性：链接的地址
例：<h2><a href="#"> 链接 </a></h2>
target属性：可以改变链接的地址，默认情况下：在当前页面打开_self 新窗口打开_blank
base:作用就是改变链接的默认行为。

十三.锚点

1.#+id属性
2.#+name属性（注意name属性加的是a标签）

十四.特殊字符

1.&+字符
2.解决冲突啊，左右尖括号，添加多个空格实现
3.&lt &gt 在这里插入图片描述 &nbsp

在这里插入图片描述

十五.列表标签

1.无序列表->ul li 符合镶嵌的模型

<u>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</u>

显示效果：

HTML
CSS
Javascript
*
2.有序列表->ol li 一般用的比较少，可以用无序列表来实现
```
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
```
显示效果：
1. HTML
2. CSS
3. Javascript
3.定义列表->dl dt dd 列表项需要添加标题和对标题进行描的内容
```
  <dl>
        <dt>标题</dd>
    </dl>
```
注意：列表之间可以相互嵌套，形成多层级的列表。

小练习：
```
 <dl>
        <dt><strong>美味的小吃</strong></dd>
    </dl>
    <ul>
        <li>小吃类
            <ul>
                <li>煮粉干</li>
                <li>拌青菜</li>
                <li>蛋炒饭</li>
                <li> 煎蛋</li>
                <li>米饭</li>
            </ul>
        </li>
            </ul>
    <ul>
        <li>卤味类
            <ul>
                <li>鸭肠</li>
                <li>面筋</li>
                <li>牛肚</li>
                <li>大肠</li>
                <li>鱿鱼</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>套餐类
            <ul>
                <li>卤面筋饭</li>
                <li>猪肉肉饭</li>
                <li>卤猪舌头饭</li>
            </ul>
        </li>
    </ul>
    <dl>
   <dt><i>亲，二十元以上可送餐哦！</i></dt>
</dl>
</body>
```
美味的小吃
- 小吃类
  - 煮粉干
  - 拌青菜
  - 蛋炒饭
  - 煎蛋
  - 米饭
- 卤味类
  - 鸭肠
  - 面筋
  - 牛肚
  - 大肠
  - 鱿鱼
- 套餐类
  - 卤面筋饭
  - 猪肉肉饭
  - 卤猪舌头饭
亲，二十元以上可送餐哦！

十六.表格标签

table,tr,th,td,caption
注：之间是有镶嵌关系的，要符合嵌套关系。
语义化标标签：tHead，tBody，tFood
注：在一个他table中tBody是可以出现多次的，但是tHead，tFood只能出现一次。

<table>:表格的最外层容器

<tr>：定义表格行

<td>:定义表格单元

<caption>:定义表格标题

表格属性：
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式 left,center,right
valign:上下对齐方式 top,middle,bottom
例：

练习：

十七.表单标签

form，input

input(单标签)标签有一个type属性，决定什么控件
```
<form action="提交的地址"></form>
  <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="chekbox" checked>香蕉
        <input type="chekbox"disabled>葡萄
<input type="radio" name="gender">男
<input type="radio" name="gender">女
```
```
<form>
        <h2>输入框</h2>
        <input type="text">
        <h2>密码输入框</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
```
属性：disabled（无法选中） checked（让复选框一开始就被选中） name（把两个单选框变成了一组）

多行文本框

:多行文本框
,:下拉菜单
:辅助表单
```
      <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option select>请选择</option>
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <select size="3">
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <select multiple>
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <input type="file">
</body>
```
这里最后的是上传文件，但不能选择多个文件，需要添加一个属性<input type="file" multiple>

lable标签

例如：
```
 <input type="radio" name="gender">男
    <input type="radio" name="gender">女
```
此时
在圈圈上可以选择而在字上却不能选择则需要label标签来辅助
```
input type="radio" name="gender" id="man"><label for="man">男</label>
    <input type="radio" name="gender" id="woman"><label for="woman">女</label>
```
（for属性与前面的id对应）
这样鼠标在字上面也可以选择了
练习：

这是一个表格+表单的组合实例

十八.div和span

div:做一个区域划分的块

span:对文字进行修饰的内联

如：
```
<div>
<h2><a href="#">  链接   </a></h2>
<p>
</p>
</div>
```
```
<div>这是一个块</div>
<span>这是一个内联</span>
```
十九.CSS基础语法
```
 <style>
        div{ width: 100px;height: 100px;background-color: red;}
    </style>
<body>
    <div>这是一个块</div>
```
div加{}来映射下面的

产生效果：

格式：

选择器{属性1：值1；属性2：值2}

单位：

px->像素(pixel),%->百分比

基本样式：

width height background-color

width：宽 height：高 background-color：背景

长度单位：

1.px->像素
2.%->百分比
外容器->600px 当前容器->300px

细节部分：
```
 <style>
        div{ width: 100px;height: 100px;background-color: red;}
    </style>
<body>
    <div>这是一个块</div>
    <div>这是又一个块</div>
```
告诉我们div{}选择器可对应多个but
```
<style>
        div{ width: 100px;height: 100px;background-color: red;}
    </style>
<body>
    <div>这是一个块</div>
    <div>这是又一个块</div>
    <span>这是一个内联</span>
</body>
```
的表达效果是

则说明div{}并不对应,若要对应则需要在

二十.CSS样式的引入方式

1.内联样式

style属性

2.内部样式

style标签
在
```
<body>
    <div style="width: 100px;height:100px;background-color: red;">这是一个块</div>
    <div>这是又一个块</div>

</body>
```
展示效果：
要体现内部样式的优点，可以复用代码
```
<body>
    <div style="width: 100px;height:100px;background-color: red;">这是一个块</div>
    <div style="width: 100px;height:100px;background-color: red;">这是又一个块</div>

</body>
```
3.外部样式：

<link>标签

rel href
引入一个单独的css文件,name.css
通过link标签引入外部资源，rel属性指定资源页面的关系，href属性资源的地址
通过@import
方式引入外部样式（这种方式有很多问题，不建议使用）
例：
```
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./#common.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
```
二十.CSS中的颜色表示法

1.单词表示法：red blue greeen yellow

2.十六进制表示法：#000000（黑色） #ffffff（白色）

0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法：rgb(255，255，255)；

取值范围：0~255

二十一.CSS背景样式

background-color背景色

background-image背景图

url（背景地址）
默认：会水平垂直铺满背景图

background-repeat:背景图片的平铺方式:

repeat-x x轴平埔
repeat-y y轴平埔
repeat( x，y都进行平铺，默认值）
no-repeat 都不平铺
```
  <style>
div{ width: 100px;height: 100px;background-color: red;background-image: url(./1.png);}
</style>
</head>
<body>
    <div>这是一个块</div>
</body>
```
```
<style>
    div{ width: 300px;height: 300px;background-color: red;background-image: url(./屏幕截图\ 2022-10-27\ 132034.png);
    background-repeat:repeat-x;
    }
    </style>
    </head>
    <body>
        <div>这是一个块</div>
    </body>
```
展示效果：
（这是控制x轴平铺）：

（这是控制y轴平铺）：

background-position:背景位置

x y:number（px，%）|
单词：
x:left,center,right
y:top,center,bottom
%：即可以使用50%%50%（填在上面单词对应位置）来表示背景位置

例：
```
 <style>
        div{ width: 300px;height: 300px;background-color: red;background-image: url(./屏幕截图\ 2022-10-27\ 132034.png);
        background-repeat:no-repeat;
        background-position: center;
        }
        </style>
        </head>
        <body>
            <div>这是一个块</div>
        </body>
```
background-attachment:背景图随滚动条移动的方式：

scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）
例：
```
 <style>
        body{height: 2000px;}/*使浏览器页面有滚动条*/
        div{ width: 300px;height: 300px;background-color: red;background-image: url(./屏幕截图\ 2022-10-27\ 132034.png);
        background-repeat:no-repeat;
        background-position: top;
        background-attachment: scroll;
        }
        </style>
        </head>
        <body>
            <div>这是一个块</div>
        </body>
```
视觉差

利用背景图固定在浏览器页面，通过上下滑动页面背景的切换来造成视觉差。

此时则需要div{}选择器对下面<body>部分来对应。具体方法见下：
```
  <style>
        #div1{}
        #div2{}
        #div3{}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
```
二十二.CSS边框样式

boeder-style:边框样式

solid:实线

（莫要慌张忘记下面<body>中的<div></div>容器)

dashed：虚线

dotted：点线

border-width:边框大小

px…

border-color:边框颜色

red #f00 …

注：针对某一条边进行单独设置

border-left-style:中间是方向left right top bottom

观察下面：在容器内不同border交界处

通过上面的方法可以设置出四个不同颜色的三角形，
颜色：透明颜色 transparent
将颜色属性（除了得到的三角形）改为透明颜色即可得到单独三角形：也可以改为页面背景相同颜色

二十三 .CSS文字样式

font-family:字体类型

英文，中文

这里的Arial是争对英文的一种字体，所以中文没变化

font-family： (输入的字体有空格时要加引号)

字体大小一般是偶数

font-style：

设置字体的风格，例如，正常（normal）倾斜、斜体（italic，oblique）等；
italic，oblique区别：
italic带有倾斜属性的字体的才能设置
oblique 没有倾斜属性也能设置

font-weight：

设置字体粗细；

font-size：

设置字体
模式：正常（normal）加粗（bold）
写法：单词（normal bold）|number（100，200…900, 100到500都是正常的,600道900都是加粗的）
设置字体尺寸；默认：16px 写法：number（px）|单词（small larger）

font-variant：

将小写字母转换为小型大写字母；

font-stretch：

对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；

font：

字体属性的缩写，可以在一个声明中设置多个字体属性。

二十四.段落样式

text-transform（文本修饰）

可以用来设置文本的大小写

可选值：
```
  none  默认值  正常显示

  uppercase   字母大写

  lowercase     字母小写

  capitalize   首字母大写
```
text-decoration

写法：

可以用来设置文本的修饰
```
可选值：

   none       没有任何修饰线

   underline;   加下划线

   overline     加上划线

   line-through  删除线
```
letter-spacing

可以指定字符间距

word-spacing

可以设置单词之间的距离

text-align用于设置文本的对齐方式

写法：
```
可选值：

  left  默认值  左对齐

  right  右对齐

  center  居中对齐

  justify  两端对齐
```
text-indent 设置首行缩进

写法：

在首行缩进中如果出现了英文会出现对不齐

一般用em为单位,1em永远字体大小相

line-hight：定义行高

行高：line-height，指的是文字占有的实际高度，可以通过line-height设置行高。
行高可以直接指定一个大小，单位可以是px 或者 em，也可以直接设置一个整数，将是字体大小的倍数；
line-height:2;表示行高是字体大小的2倍。
例：
```
<style>
    p{line-height:2}
</style>
</head>
<body>
    <p>
        任何生命都把保护自己当作至高无上的目的，这是生命世界里的原则。

这个世界上不仅有美艳的皮囊，还有有趣的灵魂，李诞虽然没有帅气的皮囊，但是他凭借着一副普通的皮囊，加上智慧的灵魂，在娱乐圈中混得风生水起，脱口秀的节目上都能够看到他的身影。
  </p>
    </body>
```
取值：1.number（px）|scale(比例值，跟文字比)

letter-spacing

是CSS的一个属性，其作用是设置字符之间的距离letter意为字符。

{
letter-spacing:normal;
}

word-spacing：

词之间的间距（中文无法使用）
假如现在要在边框中输入一段文字，如果输入的是中文则会自动折行，而如果是英文单词过长，则不会折行。
英文和数字不自动折行

强制折行：（针对英文）

1.word-break:break-all;(非常强烈）
2.word-wrap:break-word;(不是那么强烈，会产生一些空白区)

二十五.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。

1.backgroud背景：red url(./…) repeat 0 0;

2.border边框:1px red solid;

3.font:

注：最少需要两个值：size字体大小 family字体类型
weight style size family
style weight size family
weight style size/line-height family
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。

二十六.CSS选择器

id选择器

优势:优先级非常高,权重100
劣势:复用性差

注：

1.在一个页面中，ID值是唯一的。
2.命名规范，之母_-数字（命名的第一位不能是数字）。
3.命名方式，驼峰式，下划线式，短线式。

CLASS选择器（类选择器）

写法：
css：.elem{}
html:class=“elem”

注：

1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序。
4.标签+类（class）的写法

这里p标签+class
产生效果：