『妹红祈祷中』

web前端

 拾级而上  6456  13 分钟

web前端笔记

HTTP:超文本传输协议，规定了浏览器与服务器通信的规则

HTML:超文本标记语言，各种<>的功能——结构

CSS:层叠样式表，规定了颜色、大小、背景、位置等表面的东西——样式

JavaScript:一种跑在浏览器上的编程语言，让网页动起来——行为

HTML

基本结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!DOCTYPE html>						//表示该文档符合html5标准
<html lang="en">					//提示浏览器当前为英文网页,中文是"zh"
<html>
    <head>							//头部分,用来提供一些基本信息
        <meta charset="UTF-8">		//meta可以提示信息,如作者等,也可以给浏览器一些信息,如charset提示编码方式(字符集)
        <title>	</title>			//网页的标题
    </head>
    
    <body>							//主体部分,body里面才是网页真正的内容
        
    </body>
</html>

基本标签

标题 <h1~h6>:heading 1~6一级标题到6级标题:如一级标签 :<h1>百度一下</h1> (ps:标题字号可通过css调整)

段落 <p>:paragraph 段落换行并且有段落间距

​ 在段落中连续空格和空行会显示为一个空格，因此需要特殊字符&nbsp;来实现连续空格空格,用单个标签<br/>实现空行。

预留格式 <pre>:在pre格式中所有内容都会保留原格式，包括空格和空行。

斜体 <i>：<i>文本</i>，结果为斜体的文本，相比之下功能相同但语义化更强的<em>使用更为频繁(见下面的语义化板块)。

加粗 <b>：<b>文本</b>，结果为加粗的文本，相比之下功能相同但语义化更强的<strong>使用更为频繁(见下面的语义化板块)。

行内组合(强调?) <span>：将需要特殊表示的文字用<span>需要特殊表示的文字</span>包起来，通过css处理

水平线 <hr/>:单独出现的标签，打印一条水平线

注释 ：注释不会在浏览器中显示，可以换行，用来提示阅读者。

超链接 <a>：<a href="网址">文字或图片</a>其中的网址栏可以是：

  • 本站点的其他网址<a href="news.html">新闻</a>
  • 其他网站<a href="www.baidu.com">百度</a>
  • 虚拟超链接<a href="#">某内容</a> (会出现超链接的提示但点了不会跳转到其他位置)

图片 <img/>：<img src="图片地址" alt="加载失败时的替代文字" width="宽度"/>，图片地址既可以是绝对路径如C:\Users\86187\Desktop\ps？\表情\66379901_2.png，也可以是相对位置如mouku.png

​ 关于相对路径：../图库/mouku.png表示在上一级目录中的图库文件夹下查找mouku.png，./mouku.png表示在当前路径下的mouku.png，./也可以省略不写。

​ 图像格式：jpg、png、gif

区域 <div>：把

堆成区域，方便整块移动或者结合css进行排版布局,<div id="区域名" align="对齐方式">div中包括但不限于这两个词条，可以为段落赋予一定的属性。

上角标 <sup>：<sup>上角标</sup>

无序列表 <ul> <li>：无序列表

    ，列表项
  • ，<ul><li>条目1</li><li>条目2<li></ul>，也可以简写为ul>li*3+Tab，实现为：

    • 条目1
    • 条目2

    有序标签 <ol> <li>：与无序相同,无序的ul换成ol即可，实现为：

    1. 条目1
    2. 条目2

    表格 <table> <tr> <td>：table表示表格，tr表示行，th表示表头(默认加粗)，td表示列，table也可以设置一些样式，如border是边框粗细(默认无边框)，具体样式也是可以使用css设置的。

    `

    A B C
    a b c
    `

    表格的写法比较麻烦推荐使用简写:table>(tr>th*3)+(tr>td*3)

    表单 <form>：收集用户输入的标签<input type="">

    • type=”text“输入文本
    • type=“password”输入密码
    • type=“radio” name=“gender” checked=“checked” 单选，在所有name=gender的选项中选一个,checked表示默认选项
    • typr=“checkbox” 多选

    下拉列表框 <select> <option>：<select name="" id=""><option value="" selected="selected">选项1</option> <option value="">选项2</option></select> ，selected=“selected"是默认选项。(<dl><dt><dd>为自定义列表，具体见语义化)

    文本域 <textarea>：<textarea rows="宽度" cols="长度">请输入……</textarea><br/>

    例子(缝合怪)

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

    <!DOCTYPE html>
<html lang="zh">
<html>
    <head>
        <meta charset="UTF-8">
        <title>web前端笔记</title>
    </head>
    <body>
	<form action="">账户:<input type="text" name="Name"><br/>密码:<input type="password" name="Password"><br/>
		<input type="submit" value="确定"> <input type="reset" value="清空">
		男<input type="radio" name="gender" checked="checked">
		女<input type="radio" name="gender">
	爱好:<br/>
	<input type="checkbox" name="打球">打球 <input type="checkbox" name="打气">打气 <input type="checkbox" name="打钱">打钱</form>
	<ul><li>条目1</li><li>条目2</li></ul>
	<ol>
		<li>条目1</li>
		<li>条目2</li>
	</ol>
	<table border="1">
		<tr><th>A</th>
			<th>B</th>
			<th>C</th>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
			<td>c</td>
		</tr>
	</table>
	个人简介:<br/><textarea rows="10" cols="20">请输入……</textarea><br/>
	<select name="" id="">
		<option value="" selected="selected">选项1</option>
		<option value="">选项2</option>
	</select>
	<div id="图片" align="center">
		<img src="C:\Users\86187\Desktop\ps？\表情\66379901_2.png" alt="哼哼哼" width="200" />
		<img src="./mouku.png" alt="嗯……" width="200"/>
	</div>
	<div id="正文" align="center">
	<h1>web前端笔记</h1>
	<h2>HTTP</h2>
	<p>超文本传输协议，规定了浏览器与服务器通信的规则</p><hr/>
	<h2>HTML</h2>
	<p>超文本标记语言，各种<>的功能——结构</p><hr/>
	<h2>CSS</h2>
	<p>层叠样式表，规定了颜色、大小、背景、位置等表面的东西——样式</p><hr/>
	<h2>JavaScript</h2>
	<p>一种跑在浏览器上的编程语言，让网页动起来——行为</p><hr/>
	</div>
	<div id="超链接" align="center">
		<p><a href="news.html">新闻</a>|<a href="https://www.baidu.com/">百度</a>|<a href="#">你就不想点一下?</a></p>
	</div>
    </body>
</html>

    web语义化

    给每一个区域（div）赋予意义，它能使页面有良好的结构与含义，从而使人和机器更方便的理解网页内容，具体的：

    1. 结构更清晰，利于团队的开发维护。
    2. 利于搜索引擎理解，搜索引擎也会解析页面，以方便用户搜索（搜索引擎优化SEO（Search Engine Optimization））。
    3. 更容易兼容更多设备。

    语义化标签：

    强调 <em>：<em>文本</em> 表现为斜体，和<i>文本</i>一样，但<em>语义为强调，而<i>没有语义。

    重点强调 <strong>：<strong>文本</strong>表现为粗体，和<b>文本</b>一样，但<strong>具有重点强调的语义。

    自定义列表 <dl> <dt> <dd>：自定义列表dl，列表项dt，描述dd，默认描述向右缩进一格模板：

    <dl><dt>列表项1</dt>

    <dd>描述1</dd>

    <dt>列表项2</dt>

    <dd>描述2</dd></dl>

    结果为：

    列表项1

    ​ 描述1

    列表项2

    ​ 描述2

    CSS

    CSS：层叠样式表(Cascading Style Sheets)

    为了文本和图形样式更改时不互相影响，将文本与图像样式分别交给html和css来完成。

    添加的方法

    行内添加：<p style="color: red;font-size: xx-large;">测试文字</p> 在段落符<p>的里面加上style=然后直接写上CSS样式。 内嵌样式：<style type="text/css">p{color:red;font-size: xx-large;}</style> 在<head>里定义所需要的样式，type="text/css"表示由text/css规定的样式，p{}表示作用于所有p段落。

    单独文件：<link rel="stylesheet" href="css/style.css"> ，在网页文件中使用link命令链接单独的css文件，rel指示要链接的文件类型，href则是文件地址此处为css文件夹下的style.css文件，快捷键link:css+Tabimage-20210719225321930，在存放网页文件的文件夹中如图建立一个css文件夹，css文件夹中放css文件，示例中为style.css，在css文件中写入将要使用的css样式，如：

    p{ color: red; font-size: 50px; }

    Tip:

    行内添加和行内添加都只对当前页面有效，如果有多个页面则需要重新定义，适用于页面较少的情况，如果页面较多，文件就会变得很大，不仅编写麻烦，后续的维护也会比较麻烦，多页面的情况下一般使用单独文件的方法。

    css样式优先级：

    • 多重样式不重复的内容可以层叠，重复的会覆盖
    • 样式优先级采用"就近原则”,即行内添加>内嵌样式>单独文件>浏览器默认样式

    CSS选择器

    p{ color: red; font-size: 50px; }

    中p就是一个选择器，选择器指定css样式作用的范围。

    标签选择器

    选择器的名字与标签相同：如p、body、h1~6等，作用于该标签。

    类别选择器

    在head中用.类别名来为每个class赋予意义，在网页元素后加上class="类别名"使用该class，class可以被多次使用作用于多个网页元素，且多个class可以叠加。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <!DOCTYPE html>
<html lang="zh">
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            p{color:red;text-align: center}
            .blue{color:blue;}
            .green{color:green;}
            .big{font-size: 50px}
        </style>
    </head>
    <body>
	<div>
        <p class="blue">测试文字蓝</p>
        <p class="green">测试文字绿</p>
        <p class="big">测试文字大</p>
        <p class="big green">测试文字大绿</p>
        <p>样本文字p</p>
	</div>
    </body>
</html>

    运行结果为：image-20210720000034872

    ID选择器

    在head中用#类别名来为每个id赋予意义，在网页元素后加上id="类别名"使用该id，不同于class，id只能使用一次（我自己试重复使用的时候报错了，但依旧正常显示了），并且不可叠加。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <!DOCTYPE html>
<html lang="zh">
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            p{color:red;text-align: center}
            #blue{color:blue;}
            #green{color:green;}
            #big{font-size: 50px}
        </style>
    </head>
    <body>
   <div>
        <p id="blue">测试文字蓝</p>
        <p id="green">测试文字绿</p>
        <p id="big">测试文字大</p>
        <p id="big green">测试文字大绿</p>
        <p>样本文字p</p>
   </div>
    </body>
</html>

    运行结果：测试文字大绿与样本文字相同，其他同上图。

    嵌套声明

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    <!DOCTYPE html>
<html lang="zh">
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            p span{color:red;text-align: center}
        </style>
    </head>
    <body>
   <div>
        <p>样本文字</p>
        <p><span>样本文字</span></p>
   </div>
    </body>
</html>

    运行结果：image-20210731112921465

    p span{}表示在p标签内的span标签内的文本采用该样式。主要用于在文本中强调某个字或词。

    集体声明

    p,span{样式}

    使p和span的内容都使用该样式。

    全局声明

    *{样式}

    使所有内容都使用该样式。

    CSS文字样式

    1
2
3
4
5

    p{
    font-size: 2em;
    color: blue;
    font-weight: bold;
}

    对于选择器p中的文字样式的设置。

    单位 描述
    px 像素
    em 1em——1字符，该字符自动适应用户字体
    % x%的父层字体大小
    颜色表达方式 描述
    颜色名 red,bule,green等(颜色名称 :https://www.runoob.com/cssref/css-colornames.html)
    RGB值:rgb(x,x,x) 颜色对应的rgb(red,green,bule)，0<=x<256
    RGB百分比值:rgb(x％,x％,x％) 与RGB值类似，不过rgb值用百分比替代
    RGB值+透明度:rgba(x,x,x,x) 前三个x等于RGB值，最后一个表示透明度，0.0<=x<=1.0
    十六进制数:#rrggbb 使用6个十六进制数表示颜色，每两个表示一个rgb的值，倘若两两相等可两个和一个写，如：#f00=#ff0000

    文字样式

    属性 描述 取值
    color 文本颜色 red rgb(0,0,0) #f00
    letter-spacing 字符间距 2px -3px
    line-height 行高 14px 1.5em 120%
    text-align 对齐方式 center left right justify(两端对齐)
    text-decoration 装饰线 none(无) overline(上方) underline(下方) line-through(穿过文字，即错误线)
    text-indent 首行缩进 常用2em

    font字体

    属性 描述 取值
    font 简化声明字体 font:bold 18px ‘幼圆’
    font-family 字体系列,找不到第一个字体就用第二个以此类推，用’,‘隔开，倘若字体名称不带有空格则可以省略"" font-family:“Hiragino Sans GB”,“Microsoft YaHei”,sans-serif
    font-size 字号 14px 100%
    font-style 斜体，italic表示斜体 italic，normal
    font-weight 粗体，bold表示粗体 bold，normal

    简化声明模板：

    font:斜体 粗体 字号/行高 字体

    font:normal bold 16px/1.5em ‘宋体’

    表示：不斜体 加粗 16像素的字号 1.5倍行高 宋体

    背景、超链接样式

    背景属性
    backgroud-color 背景颜色
    backgroud-image 背景图片 url(“背景图片的相对路径和文件名”)
    backgroud-repeat 背景图片的填充方式 repeat 重复填满、repeat-x 横向重复填满、repeat-y纵向重复填满、no-repeat只显示一次
    backgroud 背景的简化声明 颜色 图片 repeat
updatedupdated2023-02-072023-02-07