HTML，CSS层叠样式表，JS笔记

Runickey

已于 2024-04-02 21:42:13 修改

阅读量114

点赞数 3

文章标签： html 前端 java

于 2024-02-11 00:52:26 首次发布

本文链接：https://blog.csdn.net/m0_62304048/article/details/136093809

版权

本文介绍了HTML设计的基础规范，包括HTML标签的使用、CSS布局技巧（如网格、选择器、继承）、CSS样式（颜色、尺寸、字体）以及JavaScript的引入和基本功能。内容涵盖了HTML结构、CSS样式表和脚本语言在网页开发中的重要性。

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

1.0HTML设计规范

节段：

section-performance；section-design；section-content；

小节段：subsection

网格：grid

框架：

width: 326px; 剩余:2px

height: 493px;

内容：grid-content

width: 310px;

height: 493px;

网格上部：grid

310*300；小方块上图片：310*300，rgb(white)；

网格下部：grid

310*168；小方块下内容：282*158，rgb(134, 134, 139)，21px

文章：article

内容标题：article-headline

font-size:72px

font-weight:600

文章内容：article-content文章内容

font-size: 28px;
line-height: 86px;
margin-top:8-10px;
margin-left:25px;
margin-right:25px;

文章副本：article-copy文章副本；

包裹器：

wrappers

1.1基础知识：本质上是浏览器能够读取我们的HTML内容并显示出来

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

UTF-8表示浏览器以这种编码打开文件

<title>标签则表示浏览器标签的名称

<body>
<h1>你好</h1>
<h2>你好</h2>
</body>

这些标签表示一级标题，二级标题效果如下：

<div><div>块级标签：一个标签占整整一行，无论内容多少

<span><span>行内标签：根据内容占据行内的一定空间

1.2HTML标签

<div> 标签：

在布局html重构时候，div主要用于布局框架，大小结构布局均使用div来布局。

<p> 标签:

p是段落标签，布局文章标签。布局内容，布局文章时候，文章分段，均采用p标签

<em> 标签

是一个短语标签，用来呈现为被强调的文本。

<br>标签：

HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

1超文本链接方法：a标签

HTML链接使用A标签方法，<a href = " " >链接说明<a>，用来跳转各种网站

2图片标签

<img src="网络图片地址">即可

<img src="本地图片相对地址 /地址/+名称">即可

style之间使用“；”分号表示不同

图片标签可以和超文本标签结合使用，在A标签里面嵌套图片标签可以做到点击图片，跳转标签。

3链接打开

原来网页：

<a href = " " > 点击图片跳转链接<img src="网络图片地址"> <a>

新的tap：

<a href=" "  target="_blank">

这里的<a>target="_blank"表示跳转新的页面而不是原来的页面。

4列标签（块级标签）

常规列标签
<ul>
    <li>移动</li>
    <li>移动</li>
    <li>移动</li>
</ul>

有序号的列标签
<ol>
    <li>移动</li>
    <li>联通</li>
    <li>电信</li>
</ol>

这样子的就是列标签

5表格标签

<h1>表格</h1>
<table border="1">
    <thead>
    <tr> 
    <td>ID</td> 
    <td>品牌名称</td>
    </tr>
    </thead>
    <tbody>
    <tr>  <td>1</td> <td>丰田</td> </tr>
    <tr>  <td>2</td> <td>特斯拉</td> </tr>
    <tr>  <td>3</td> <td>福特</td> </tr>
    </tbody>
</table>

<tr> </tr>表示一列，<td></td>表示一行

6 INPUT标签

<input type="text" />
<input type="password" />

<input type="file" />

<!-- 单选框 --name的标签一样是为了强迫只选择一个按钮>
<input type="radio" name="n1" />男
<input type="radio" name="n1" />女

<input type="checkbox" />唱
<input type="checkbox" />跳
<input type="checkbox" />Rap
<input type="checkbox" />篮球

<input type="button" value="提交"/> 普通按钮
<input type="submit" value="提交"/> 提交表单

<h1>多行文本</h1>
<textarea rows="3"></textarea>

<h1>多行文本</h1>
<textarea></textarea>

rows为3则支持写入3行

7下来框、

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

8提交数据form标签

把form标签包裹住input标签就可以了

<form method="get" action="/reg">
用户名<input type="text" name="username">
密码<input type="password" name="password">
<input type="submit" value="提交"/>   提交表单
</form>

form标签要与submit按钮一起使用，form标签的method写上get/post请求，action表示提交的你自己的网页地址。

FLASK中的请求参数传递基本都是使用request的，request有很多属性以及相关操作，如果需要在IDE中显示自己的提交数据，就需要使用到request方法。

@app.route("/reg")
def register():
    print(request.args)
    print(request.form)
    return "注册成功"

request.args就是获取请求链接中 ? 后面的所有参数，并把所有参数转换成一个列表，列表里面的元素是一个元组，结构为：('id','1')，最后在IDE中显示出来。

request.form原理跟request.args差不多，只是request.form的数据来源是form表单，其他操作基本一致。

CSS笔记

1、CSS模板继承

在CSS模板继承中，父类{% block content %} {% endblock %}不要包裹在标签中。

2.、引入方式

在head中写stye标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{color : red}
    </style>
</head>
<body>
<div>
    <h1 class="c1">标题</h1> <div> <body>

通过类选择器选择c1，c2即可

在文件中引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css">
</head>

然后文件中写入.c1 , .c2的style即可。

3、CSS选择器

ID选择器（优先级更高，id唯一）

<style>
    #c1{height:50px}
</style>
id="c1"

类选择器（优先级较低，class不唯一）

<style>
    .c1{height:50px}
</style>
class="c1

后代选择器（选择类里面的子孙标签）

<style>
    .pw > a {color:gold}
</style>

<div class="pw">
<a>密码 :</a>
    <input type="password" name="password">
</div>

标签选择器

<style>
    div{color:red}
</style>

这样所以div标签的颜色都是红色的。

多个选择器使用

<style>
    .c1{height:50px}
    .c2{font-size:20px}
</style>

<div class="c1 c2">

<style>
    .c1{height:50px !important}
    .c2{font-size:20px}
</style>

important说明c1无法覆盖

4、常见样式

居中：

css向右居中

.nav-content {
width: 980px;
margin: 0 auto; /* Center the content horizontally */
position: relative;
}

ul {
list-style-type: none;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}

颜色：

背景色：

background: gray;

渐变色：

 background-image: -webkit-linear-gradient(45deg, #F1AD70, #B36BFF );
        /*使用透明颜色填充文本。*/
        -webkit-text-fill-color: transparent;
        /*用文本剪辑背景，用渐变背景作为颜色填充文本。*/
        -webkit-background-clip: text;




/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

高度和宽度：

.c2{height:50px}
.c3{width:50%}

Dispay：inline-block，应用于行内，块级标签

<style>
    .c1{
        display:inline-block
        height:
        width:
    }
</style>

这样使得行内，块级标签只占据页面的一部分。

字体大小，字体加粗，字体样式

font-size
font-weight
font-family

字体对齐

.c1
{text-align水平居中
 line-height垂直居中
}

3.0Javascript

js：实现动态功能

3.1js位置：body标签的里面（推荐），js文件中导入
注释功能”CTRL+/“

引入js:
src引入

变量：<script type="text/javascript">
var name="A"
</script>

输出：
<script type="text/javascript">
console.log(name)
</script>
浏览器检查的console中查看效果

功能：
var v1 = name.length//求长度
var v2 = name.[0]//获取数据，根据0，1，2获取相应数据位置
var v3 = name.trim()//去除空白
var v1 = name.length

3.2js常见事件：

3.3JS数据类型：

字符串类型：

数组类型：