前端学习第一周-HTML基础

文章目录

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

前言

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

本周内容主要对计算机的基础进行简单介绍，然后是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思维导图。

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

掉进悬崖的小白，捡到python基础秘籍，学习第一周——语法基础，小游戏，无脑循环
掉进悬崖的小白,捡到python基础秘籍,学习第一周--语法基础,小游戏,无脑循环人生苦短,我用python 语言的种类: 语言的发展: 什么是python 搭建 Python开发环境: 集成开发环 ...
入学第一周——计算机基础
古语云:"千里之行,始于足下.IT行业亦是如此:故而,我们入学之后的第周便是学习了计算机基础. 想成为一名程序员,就必然离不开鼠标与键盘的应用,所以老师首先为我们介绍了关于鼠标键盘的知识.计 ...
web前端学习第一周（1~20）
一.导学大纲拨云见日入门html及css:学习传统的和智能的切图:进入时间阶段:PC企业和PC游戏布局. 溯本求源学习html,css的扩展,html5新语法,css3新语法及兼容于hark. ...
前端学习（1999）vue之电商管理系统电商系统之分析表单的数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1954）vue之电商管理系统电商系统之重置表单数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
web前端学习第一周总结
经过一周的HTML的基础知识的学习和实践我收获了很多. 总结一下我上星期所学的内容及掌握程度. html基本结构熟练并能记住. 标签的使用网页的基本标签已熟练并记住. 选择器的使用及组合组合选择 ...
Web前端学习第一周
文章目录第一步:拨云见日第二步:溯本求源第三步:风生水起第四步:巧夺天工 ==一.什么是HTML.CSS?== ==二.宇宙第一编辑器VS Code== ==三.Chrome 浏览器== == ...
前端学习（2685）：重读vue电商网站6之如何重置表单
element-ui 对表单提供了如下方法 resetFields,我们只需要获取表单对象数据即可重置我们的表单. 获取表单对象方式如下: 直接在表单处添加 ref属性,如下 loginFormRef ...
前端学习（1865）vue之电商管理系统电商系统之实现表单的数据绑定
修改头像位置 3目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './co ...

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