day1_1 html和CSS基础

亦昭昭

已于 2024-03-07 18:14:21 修改

阅读量1.1k

点赞数 31

分类专栏：记录前端学习文章标签： html css 前端

于 2024-01-06 15:45:23 首次发布

本文链接：https://blog.csdn.net/z240113765/article/details/135427198

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

前言

开发工具

vscode。

web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。web标准即是要求三者分开来写，基础阶段就是结构用html文件来写，表现用css文件来写，行为用JavaScript文件来写。

有一些快捷键很方便

1.！+ tab召唤html文件基本骨架
2.Ctrl+L选中行，alt+上/下箭头移动代码，alt+shift+上/下箭头相当于复制粘贴选中的代码行

有一些插件很方便

1.页面显示
在页面显示的插件上我更推荐使用Live Server,比起open in browser，它可以实时更新你的页面变化，不需要刷新页面，因而更加方便。

2.代码逻辑
Rainbow Brackets可以让不同匹配的括号显示不同的颜色，方便辨别逻辑。

3.自动格式化
之前看见有人推荐beauty，但是它现已停止维护，可以直接在设置里设置自动格式化

html标签

`<div>`和`<span>`的区别和联系

两者都是负责布局的“盒子”，但是div只能单行显示，而一行可以显示多个span

特殊字符

 代表空格

表格相关

align="center" 用于设置表格在浏览器中居中
合并单元格：rowspan="合并单元格的个数" 用于跨行合并；colspan="合并单元格的个数"用于跨列合并。写上该代码后删除相应单元格。

表单

首先写一个表单域<form>,其它的代码写在表单域里，表单元素主要是<input><select><textarea>

<input>的使用主要是根据不同的type实现不同的输入，来收集用户信息。在设置选项时，注意把同类的选项设置成相同的name。

<!-- 把表单域里面的表单元素提交给后台服务器 -->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <!-- 普通按钮，js搭配使用 -->
    <input type="button" value="获取验证码">
    <input type="file" value="上传文件">

在<input>中有一个<lable>标签可以提升用户体验，举例来说，如以下代码和图片：

    性别：<input type="radio" name="sex" value="男" checked="checked" id="sex"><label for="sex">男</label>
    <input type="radio" name="sex" id="sex"><label for="sex">女</label>
    <input type="radio" name="sex" id="小动物"><label for="小动物">小动物</label>

若不加<lable>标签，在选择性别时只能点击圆圈，加上了之后，点击文字就可以切换选择，文字换成图片也可以达到这样的效果。

举例如下：

下拉表单：
    <select name="shuzi">
        <option>5</option>
        <option selected="selected">1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>

举例如下：

文本域：
    <textarea name="message" id="feedback" cols="30" rows="10">
            你的反馈
    </textarea>

可以观察到，以上三个表单元素都应该有name属性，通过为每个表单元素设置唯一的 name 属性，可以在提交表单时，后端服务器能够根据这些名称来获取用户输入的值，以便进行进一步的处理和验证。这样，表单数据就可以准确地传递给后端服务器，并被正确地处理。

CSS

在学校课程的学习中，样式设计是直接写在相应的html文件里，即在<head>部分里加上<style>标签，在<style>里面写CSS代码。现在通过在<head>部分里加上以下代码，把CSS文件样式应用到html文件里。

<link rel="stylesheet" href="study.css"">

CSS的四种基础选择器

标签选择器

 /* 首行缩进和行距*/
 p {
     text-indent: 2em;
     line-height: 2em;
 }

类选择器、多类名选择器

html文件
<div class="zhezhe">
        hhh
    </div>

CSS文件
 .zhezhe {
     color: blueviolet;
     font-size: large;
 }

<div class="zhezhe this">
        hhh
    </div>

 .zhezhe {
     color: blueviolet;
     font-size: large;
 }

 .this {
     font-style: italic;
     font-family: 'Times New Roman', Times, serif;
 }

id选择器

和以上的类选择器类似，但是类可以被多次使用，id是唯一的。

<div id="example">
        死之结界
    </div>

 #example {
     color: brown;
 }

通配符选择器

给所有元素使用

* {
        margin: 0;
        padding: 0;
    }

复合选择器

包括后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器 (重要）

<h4>有序列表</h4>
    <ol>
        <li>1</li>
        <li>2</li>
    </ol>

ol li {
     color: brown;
 }

表示选择ol里面的所有li(后代元素)。

子选择器 (重要）

<div class="zixuanze">
        <a href="#">son</a>
        <p>
            <a href="#">grandson</a>
        </p>
    </div>

 /*子选择器，选最近的儿子 */
 .zixuanze>a {
     color: blue;
     font-size: 50px;
     text-decoration: none;
 }

表示选择zixuanze里面的所有直接后代(子元素) a。

并集选择器 (重要）

可以选择多组标签，类等，用逗号隔开。

 p,
 span {
     color: yellow;
 }

伪类选择器

a:link: 没有点击过的链接
a:visited: 点击过的链接
a:hover: 鼠标经过的链接
a:active: 鼠标正在按下还没有弹起鼠标的链接

 a:link {
     */ color: aqua;
 }

 a:visited {
     color: antiquewhite;
 }

 a:hover {
     color: red;
 }

 a:active {
     color: black;
 }

 input:focus {
     background-color: aquamarine;
 }

 input:hover {
     color: blue;
     background-color: peru;
 }

后面两条的举例: