前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用

本文链接：https://blog.csdn.net/keaicha/article/details/124692898

前端学习第一周-HTML基础

文章目录

前端学习第一周-HTML基础
前言
DAY 1
- - 计算机组成
  - 计算机网络
DAY 2
- vscode快捷方式
- HTML骨架
DAY 3
- HTML属性
- HTML标签
DAY 4
- form表单
DAY 5
总结

前言

提示：这里可以添加本文要记录的大概内容：

本周内容主要对计算机的基础进行简单介绍，然后是html标签的介绍，其中包括列表，表格以及表单的使用。

提示：以下是本篇文章正文内容

DAY 1

计算机组成

计算机硬件：cpu、主板、机箱、硬盘、显卡
计算机软件：
+ 系统软件：windows、Linux编译器、数据库管理
+ 应用软件：WPS、Word

计算机网络

局域网、城域网、广域网
本地地址：127.0.0.1 == localhost
域名解析 DNS

dms快捷指令（dos命令）
cls-清屏
cd 指定目录-跳转到该文件夹
dir -查看该文件夹下面的文件内容
ipconfig -查看ip地址
ipconfig/all -查看所有的ip地址
ping ip -测试网络状态
md -新建文件夹
rd -删除指定文件夹
del 文件名称 -删除文件
cd …/ -返回上一级目录
cd / -跳转到根目录
快捷键tab -自动补齐命令
alt+空格+c -结束操作指令
了解 three.js

20个linux常用命令
ls：列出文件list
cd：切换目录change directory
cp：复制copy
mv：移动move
rm：移除，删除remove
mkdir：创建文件夹make directory
rmdir：移除，删除文件夹remove directory
chown：更改所有者change owner
chmod：更改文件的权限模式change mode
find：查找
|：管道
grep：按行查找并匹配
tar：打包，压缩，解压
cat：打印文件内容
ps：查看进程process select
kill：杀死进程
passwd：修改密码password
pwd：显示工作目录print work directory
tee：显示并保存
reboot：重启

DAY 2

vscode快捷方式

ctrl+/ 注释
ctrl+b 快捷展开资源管理器
ctrl+s 保存
ctrl+f5 强制刷新

HTML骨架

代码及解释如下：

<!DOCTYPE html>  <!-- 文档类型申明DTD，以便验证文档是否符合文档类型定义(Document Type Declaration) -->
<html lang="en">  <!-- 表示网页中的语言，zh表示中文-->
<head>
    <meta charset="UTF-8">  <!--charset字符集 utf-8覆盖所有字符 gb2312收录所有汉字、英语和其他字符 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!--兼容ie浏览器，现在一般不使用-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--视口设置：兼容移动端，大小保持1.0不更改-->
    <meta name="keyword"  contect="学习，前端，开始">
     <!-- 可选择的属性 keyword 主要的一些关键词的查找 -->
     <meta name="description" content="这里主要填写标题的简介，可以更加详细的知道搜索出来的内容">
     <!-- description 可以进行一些描述简介，可以在搜索引擎中直接显示出来-->              
    <title>day 2</title>
    <link rel="shortcut icon" href="./chixigua.ico"> <!--更改标题的图标-->
</head>
<body>
    hello world
</body>
</html>

可以通过输入英文！然后tab按键快速生成骨架

DAY 3

HTML属性

id：描述id（必须唯一）
class：类（可以重复；可以通过空格写不同的类）
style：样式（所有的样式都可以写）（格式:类名=“样式名：样式值”）

HTML标签

标题标签 <h1-h6>
段落标签<p>
换行标签<br>
下划线<hr>

图片标签<img src="" alt="">
src="“路径，本地文件路径；网络路径
alt=”“当图片显示不出来时的替换文字
title=”“图片标题，鼠标悬停时展示
width=”“图片宽度（单位一般选择px）
height=”"图片高度（两者可只选择其一，自适应）
视频标签<video>
controls 视频标签独有控件，存在才能播放
链接标签<a>

 <a href="链接地址"></a>

斜体标签<i></i> <em></em>
加粗标签<b></b> <strong></strong>
表格标签

 <table border="1" style="border-collapse:collapse">
        <thead>
            <tr>
                <th>头部行1</th>
                <th>头部行2</th>
                <th>头部行3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                 <td rowspan="2">1</td>
                 <td>2</td>
                 <td>3</td>
            </tr>
             <tr>
                 <td>5</td>
                 <td>6</td>
            </tr>
             <tr>
                 <td>7</td>
                 <td colspan="2">8</td>
                 <!-- <td>9</td> -->
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>尾部行1</td>
                <td>尾部行2</td>
                <td>尾部行3</td>
            </tr>
        </tfoot>
     </table>

头部行1	头部行2	头部行3
1	2	3
1	5	6
7	8
尾部行1	尾部行2	尾部行3

表格标题 <caption>

border 边框线粗细
rowspan 合并行
colspan 合并列
cellspacing 单元格的空白间隙
cellpadding 单元格和文字之间的位置

转义字符

 &lt; 小于号 <
 &gt; 大于号 >
 &nbsp; 小空格 
 &emsp; 大空格
 &copy; 版权字符 @

DAY 4

form表单

表单是一个包含表单元素的区域。
多数情况下被用到的表单标签是输入标签。
输入类型是由 type 属性定义。
文本域（Text Fields）
文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段： <input type="password">
单选框：<input type="radio">

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框<input type="checkbox">

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮<input type="submit">

下面代码块为input类型举例及释义：

    文本框<input type="text"><br><!--输入文本-->
    密码框<input type="password"><br><!--自动隐藏输入的字符-->
    数字框(只能输入1-6的数字）<input type="number" max="6" min="1"><br><!--只能输入数字和"e"-->
    时间框1<input type="date"><br>  <!--定位到具体某一天-->
    时间框2<input type="month"><br><!--定位到月份-->
    时间框3<input type="datetime-local"><br><!--定位到具体的分钟-->
    按钮框1<input type="button" value="点击我"><br><!--现已经不常用，一般直接使用<button>标签-->
    按钮框2<button>也可以点击我</button>
    <form>
        单选框<input type="radio" name="1" value="3"><input type="radio" name="1" value="1"><input type="radio" name="1"  value="2"><br><!--只能选其一-->
    </form>
        多选框<input type="checkbox"><input type="checkbox"><input type="checkbox"><br><!--可以多选-->
    
    颜色选择框<input type="color"><br>
    文件选择框<input type="file"><br> <!--较为重要-->
    提交框<input type="submit"><br>
    重置<input type="reset"><br><!--这两个较特殊，为自带文字的按钮框-->

DAY 5

列表

有序列表
<ol>
   <li></li>
   <li></li>
   <li></li>
</ol>
无序列表
<ul>
    <li></li>
	<li></li>
	<li></li>
</ul>
定义列表（不常用）
<dl>
	<dt>定义列表的title</dt>
	<dd>定义列表的内容</dd>
</dl>
页面嵌套<iframe>
 <iframe src="链接"></iframe>

布局标签<div> <span>
div,span没有默认样式，如果没有内容，则不占页面空间

标签分类

1.单标签:link hr br input meta iframe img
2.双标签：table form p b a ul li
双标签可以嵌套任何标签，单标签不能进行嵌套；
1.块标签（可以设置高宽，且独占一行）：div h1 p
2.行内块（可以设置高宽，但不会独占一行）：img video input
3.行内标签（不能设置高宽，不能独占一行）：span a

便签的通用属性：
1.id（不能重复，必须唯一）
2.class（可以重复；可以通过空格写不同的类）
3.style（写样式）

初始CSS：
css为层叠样式表
语法：CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来
p {color:red;text-align:center;}

css选择器

1.id选择器（#id）不允许重复，不要以数字开头
2.class类选择器（.类名）可以重复，不要以数字开头
3.标签选择器（标签名）也称为元素选择器
*4.包含选择器（A B {}）AB为html标签，表示对于处于A中的B标签有效

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

*5.子选择器（A>B {}）指定目标选择器必须处在某个选择器对应的元素内部，相当于子标签

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

*6.兄弟选择器（A~B {}） A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>

7.相邻选择器（A+B {}）两个相邻的选择器
8.通用选择器（{属性:属性值}）匹配html里面的所有标签

优先级：行类>id>class>标签
使用方式：
1.行类样式（内联）
2.内嵌样式表
3.外部样式

总结

这里对文章进行总结：

参考文章week1思维导图。