前端，从入门到入土

最新推荐文章于 2022-03-07 17:06:24 发布

Amon0120

最新推荐文章于 2022-03-07 17:06:24 发布

阅读量231

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_40272238/article/details/110312155

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是一篇关于前端开发的入门博客，详细介绍了HTML的基础元素和标签，包括标题、段落、图像、超链接、表格、列表等，并探讨了CSS的基础概念，如选择器、样式设置，以及如何通过CSS美化HTML页面。作者分享了学习心得，旨在帮助初学者建立前端基础知识体系。

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

前端，从入门到入土

写在前面，更是写给自己：

2020年11月16日，我发表了我的第一篇博客，主要是为了自己学习，给自己看的一篇博客，希望能坚持下去，记录我学习前端时的点点滴滴，希望不要成为黑历史2333，希望我每次打开我的博客看到这段话时，能保持第一次编程的好奇。

加油！

2020年11月16日的我

我的博客：

→→→CSDN博客←←←

学习方法：

网课：BV14J4114768

资料：w3school

HTML

开头

“<!DOCTYPE>”：document type，文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>

意思是：这网页用html5版本来显示

<html lang="en">
<html lang="zh-CN">

lang = language，虽然en，但你可以输入中文，中文同理，但是会影响到谷歌生草机

<mate charset="UTF-8">
<mate name="viewport" content="width=device-width, initial-scale=1.0">

charset：字符集，识别和存储文字，常见的有GB2312（简体中文）、BIG5（繁体中文）、GBK（简体和繁体中文）和UTF-8，UTF-8被称为万国码，基本包含了全世界国家需要用到的字符，写它就完事了

以上部分直接在VC中输入"!"即可自动生成

标签（很多但很有用）

标题标签：

<h1>从h1到h6是标题标签</h1>
<h2>我是二级标签</h2>
<h3>等级从1到6字体逐渐变小变细</h3>
<h4>只会在一行内显示</h4>

段落标签：

<p>p是paragraph的缩写，可以分成若干的段落</p>

在html文件的文本里回车是木大的，浏览器会自动忽视回车，两个及以上的空格会减少到一个空格

换行标签：

就这？<br />爬！

效果：

就这？

爬！

文本格式化标签：

<strong>这是加粗</strong>
<b>b也是加粗，strong是加粗，虽然这俩看起来都是加粗</b>
<em>这是倾斜</em>
<i>i也是倾斜，弟位和b差不多</i>
<del>这是删除线</del>
<s>s也是删除线，弟位……</s>
<ins>这是下划线</ins>
<u>u也是下划线，弟位同前面几个……</u>

div和span标签：

<div>这是div标签，自己独占一行，后面不能写别的东西</div>
<span>这是span标签，一行可以放好几个</span>

div=division，意为分割、分区，是大箱子；span意为跨度、跨距，是小箱子

图像标签和路径：

src属性是图片路径，是img标签的必须属性，它用于指定图像文件的路径和文件名

<img src="img.jpg"/>

效果：在这里插入图片描述

alt属性是文本，当图像无法显示时用此文本替换图片

<img src="img1.jpg" alt="←这是我的头像">

注意：并"img1.jpg"这张图片，所以出错了；

效果：在这里插入图片描述

图片：我裂开了

title，属性是文本，提示用，鼠标放在图像上时显示文本

<img src="img.jpg" title="这是我的头像"/>

效果：在这里插入图片描述

因为文字被迫把图片裁小，导致字体不清楚，凑合看

width和height，属性为像素，可以设置图像的大小

<img src="img.jpg" width="114"/>

效果：在这里插入图片描述

width(宽)和height(高)只用设置一个，图片会等比例缩放，如果想两个都设，可能会发生如下情况

<img src="img.jpg" height="114" width="514"/>

效果：在这里插入图片描述

img.zip(滑稽)

border，属性为像素，可以设定图片的边框

<img src="img.jpg" border="20"/>

（vc中border的字体颜色和其他如src或alt的不一样，因为边框主要在CSS中使用）

效果：在这里插入图片描述

这相片要是个灰白的就成遗照了

相对路径：相对于HTML文件的路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件的同一级如`<img src="img.jpg"/>`
下一级路径	/	图像文件位于HTML文件的下一级如`<img src="images/img.jpg"/>`
上一级路径	…/	图像文件位于HTML文件的上一级`<img src="../image.jpg"/>`

绝对路径：从盘符开始的路径，或者是图片所在的网址

<img src="C:\Users\Beaker\Desktop\practice\img.jpg"/>

这个路径为我电脑内头像所在的位置

超链接标签

格式：`<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>`

a = anchor，意为：锚

属性	作用
href	必须属性，指定链接目标的url地址
target	指定链接页面的打开方式，其中`_self`为默认值，`_blank`为在新窗口中打开方式

分类：

外部链接：

<a href="http://www.baidu.com" target="_self">百度</a>

从当前页面跳转到百度

内部链接：
```
<a href="practice2.html" target="_blank">练习2</a>
```
在新窗口中打开练习2，因为练习2和练习1在同一级路径下，所以href有名称就行
空链接：没有确定的链接目标时，可以这么写
```
<a href="#" 空白页 </a>下载链接：
```
下载链接：如果href里面是一个文件，那么会下载这个文件
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加到超链接
```
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
```

锚点链接：点链接可以快速定位到页面中的某个位置

<a href="#live">个人信息</a>

<h6 id="live">个人信息介绍</h6>

注释标签

以结束，中间放注释语句

快捷键Ctrl+/

表格标签

<table></table>：表格

<tr></tr>：行（必须放在table内）

<td></td>：单元格（table data，必须放在tr内）

<th></th>：表头单元格（table head，用法同td），表头单元格里面的文本会加粗居中显示

<thead></thead>：定义表格的头部，内部必须有tr标签，方便阅读

<tbody></tbody>：定义表格的主体，用法同thead

示例：

<table>
    <thead>
    	<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
    </thead>
    <tbody>
    	<tr><td>小明</td> <td>男</td> <td>18</td></tr>
    </tbody>
</table>

表格属性（不常用，经常通过CSS来设置）：

属性名	属性值	描述
align	left、center、right	设置表格相对周围元素的对齐方式
border	1或""	设置表格有没有边框，默认为""，表示没有
cellpadding	像素值	设置文本和边框之间有多大的空白，默认1像素
cellspacing	像素值	设置边框的粗细，默认像素2
width和height	像素值或百分比	规定表格的宽度和高度

示例：

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="300">
    ……
</table>

合并单元格：

(1,1)	(1,2)	(1,3)
(2,1)	(2,2)	(2,3)
(3,1)	(3,2)	(3,3)

rowspan：跨行合并，例如(2,1)和(3,1)合并，从最上面的单元格为目标作开始

colspan：跨列合并，例如(1,2)和(1,3)合并，从最左边的单元格为目标作开始

示例：（以上表为例，将(1,2)和(1,3)合并、(2,1)和(3,1)合并）

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

记得删除被合并的单元格！！！

列表标签

无序列表

使用<ul></ul>定义无序列表，使用<li></li>定义列表项
```
<ul>
    <li>就这</li>
    <li>不会吧？不会吧？</li>
    <li>别恶心我</li>
</ul>
```
效果：

• 就这？

• 不会吧？不会吧？

• 别恶心我

（想去掉前面的加重号请学习CSS（其实不用li，用p就好了））
有序列表

使用<ol>定义有序列表，使用<li>定义列表项，使用方法同无序列表

效果：
1. 就这？
2. 不会吧？不会吧？
3. 别恶心我
自定义列表

使用<dl>定义列表，使用<dt>定义项目，使用<dd>定义项目中的小项目
```
<dl>
    <dt>联系方式</dt>
    <dd>QQ</dd>
    <dd>微信</dd>
    <dd>邮箱</dd>
</dl>
```
效果：

联系方式

QQ

微信

邮箱

（别问前面怎么不要空格，问就是CSS）

表格主要用于展示数据，而列表重要的是布局

表单标签

在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息组成

表单域

表单域是一个包含表单元素的区域

在HTML中， <form>标签用于定义表单域，以实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单元素的名称，以区分同一个页面中的多个表单域

表单元素

input标签

<input>标签用于收集用户信息

在<input>标签中，包含一个***type***属性，更具不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type="属性值" />

type属性的属性值极其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JS启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清楚表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除type属性外，<input>标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定input元素首次加载时应该被选中
maxlength	正整数	规定输入字段中的字符的最大长度

<label>标签为input元素定义标注

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或者选择到对应的表单元素上，用来增加用户体验

select标签

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

内部的每个选项均放在<option>标签内，且至少有一个<option>标签

可用selected来规定select元素首次加载时的默认选中项

textarea标签

可以输入较多的文本，可以输入多行文本

cols=“每行中的字符数” row=“显示的行数”（实际应用中为什么不用神奇的CSS呢？）

表单标签整活：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML练习
    </title>
</head>
<body>
    <form>
        用户名：<input type="text" value="请输入用户名" maxlength="6" name="name">  
        <br>
        密码：<input type="password" name="password">
        <br>
        <input type="radio" name="sex" checked="checked" id="man"><label for="sex">男</label>
        <input type="radio" name="sex" id="woman"><label for="woman">女</label>
        <br>
        爱好：
        <input type="checkbox" name="hobby" checked="checked" id="eat"><label for="eat">吃饭</label>
        <input type="checkbox" name="hobby" id="sleep"><label for="sleep">睡觉</label>
        <input type="checkbox" name="hobby" id="fight"><label for="fight">打豆豆</label>
        <br>
        籍贯：<select>
            <option selected="selected">（请选择出生地）</option>
            <option>地球</option>
            <option>月球</option>
            <option>火星</option>
            <option>M78星云</option>
        </select>
        <br>
        上传照片：<input type="file">
        <br>
        愿望：<textarea cols="30" rows="5">
            你不会真敢想吧？
        </textarea>
        <br>
        <input type="button" value="获取验证码">
        <br>
        <input type="submit" value="点击注册">
        <br>
        <input type="reset" value="重新来过">

    </form>
</body>
</html>

特殊字符

一些字符不方便在HTML页面中使用，此时可以使用特殊字符来替代

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和符	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

CSS

简介

CSS，是层叠样式表(Cascading Style Sheets)的简称，如果说HTML是前端中的名词，那么CSS就是前端中的形容词，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式

简而言之，做美容的

CSS最大的优势是让HTML专注做结构，样式交给CSS，即结构(HTML)和样式(CSS)相分离

格式：选择器 {属性:参数;}

举个栗子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实验</title>
    <style>
        p {
            color: aqua;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>就这？</p>
</body>
</html>

注意：CSS内的注释为/*注释文本*/，而非HTML的

基础选择器

栗子：

<div>我是div1</div>
<div>我是div2</div>
<p>
    我是p1
</p>
<ul>
    <li>我是li1</li>
</ul>
<ol>
    <li>我是li2</li>
</ol>

如何把div里面的文字改成红色？只想改第一个div里面的文字呢？把ul里面的li文字改为红色呢？

为了把不同的标签选出来，用选择器来解决

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

类选择器

想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

语法：

.类名{
	属性1：属性值1;
}

栗子：

<style>
    .red{
        color:red;
    }
</style>
……
<div class="red">文本</div>

class内可以写多个类名，中间用空格隔开，例如

<style>
    .red {
        color:red;
    }
    .font35 {
        font-size:35px;
	}
</style>
……
<p class="red font35">文本</p>

id选择器

id选择器可与为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

语法：

<style>
    #id {
        属性1:属性值1;
    }
</style>

栗子：

<style>
    #red {
        color:red;
    }
</style>
……
<div id="pink">
    文本
</div>

类选择器和id选择器的区别：

1. ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次

2. **可以使用类选择器词列表方法为一个元素同时设置多个样式。**我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）

通配符选择器

在CSS中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）

语法：

<style>
    * {
		属性1:属性值1;
    }
</style>

栗子：

<style>
    * {
        color:red;
    }
</style>
……
<div>文本1</div>
<p>文本2</p>

Amon0120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端，从入门到入土

前端，从入门到入土 写在前面，更是写给自己：       2020年11月16日，我发表了我的第一篇博客，主要是为了自己学习，给自己看的一篇博客，希望能坚持下去，记录我学习前端时的点点滴滴，希望不要成为黑历史2333，希望我每次打开我的博客看到这段话时，能保持第一次编程的好奇。       加油！    &nb
复制链接

扫一扫

专栏目录

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和符	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和符	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

前端，从入门到入土

前端，从入门到入土

写在前面，更是写给自己：

我的博客：

学习方法：

HTML

开头

标签（很多但很有用）

标题标签：

段落标签：

换行标签：

文本格式化标签：

div和span标签：

图像标签和路径：

src属性是图片路径，是img标签的***必须属性***，它用于指定图像文件的路径和文件名

alt属性是文本，当图像无法显示时用此文本替换图片

title，属性是文本，提示用，鼠标放在图像上时显示文本

width和height，属性为像素，可以设置图像的大小

border，属性为像素，可以设定图片的边框

相对路径：相对于HTML文件的路径

绝对路径：从盘符开始的路径，或者是图片所在的网址

超链接标签

格式：<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

分类：

注释标签

表格标签

列表标签

表单标签

表单域

表单元素

input标签

select标签

textarea标签

特殊字符

CSS

简介

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

src属性是图片路径，是img标签的必须属性，它用于指定图像文件的路径和文件名

格式：`<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>`

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和符	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`