day1_1 html和CSS基础

发布时间：2024年01月12日
在之前的课程学习中，因为只学习了几天，我学的是一些基础的html标签和布局格式，css样式和JavaScript都是直接写在html文件里，在担任前端完成一次大作业之后，我了解了Bootstrap栅格布局，还有一些新的JavaScript的使用。前几天，我隐约有放弃考研的想法，于是在某站上看了一些基础前端开发的知识，以下为我对我的已知知识的记录，仅概括我认为比较重要和我记不太清的知识点。

前言

开发工具

在学校的课程学习中，老师授课要求使用的是hbuilder，我认为它很直观，页面也很舒服，对初学者非常友好，但我的需求是就业，我之后的学习会使用vscode。

web标准的构成

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

有一些快捷键很方便

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

有一些插件很方便

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

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

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

html标签

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

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

特殊字符

&nbsp;代表空格

表格相关

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>

image.png
若不加<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>

image.png

可以观察到，以上三个表单元素都应该有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;
 }

image.png

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

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

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

image.png

id选择器

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

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

 #example {
     color: brown;
 }

image.png

通配符选择器

给所有元素使用

* {
        margin: 0;
        padding: 0;
    }
复合选择器

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

后代选择器 (重要）
<h4>有序列表</h4>
    <ol>
        <li>1</li>
        <li>2</li>
    </ol>

ol li {
     color: brown;
 }

image.png

表示选择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;
 }

image.png
表示选择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;
 }

后面两条的举例:
image.png

image.png

文章来源:https://blog.csdn.net/z240113765/article/details/135427198
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章