30
社区成员
发帖
与我相关
我的任务
分享学习周报 | 当 HTML 遇见 CSS：我的前端入门第一周
这里是一篇学习周报，记录我学习前端HTML和CSS的第一周。如果你也在入门阶段，希望我的经验可以给你一些有用的参考；如果你是老手，欢迎你指出我理解不到位的地方。
HTML 不是编程语言，是“搭房子”的蓝图
- HTML 是超文本标记语言，它用标签来描述网页的结构，就像建筑图纸上画好哪里是客厅、哪里是卧室。
我学到的核心标签：
<!DOCTYPE html> //声明为HTML5文档
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
html 是页面的根元素，头尾的范围是完整的页面
head是头部元素，包含了文档的元数据，如上定义了网页编码格式是utf-8
title是设置文档标题
body是设置可见的页面内容
h设置标题，有六种标题h1~h6；和title区别在于，h是展示在网页正文里的
p是段落，专门存放正文段落；
- 每一对p单独占据一行，多个段落自动分段
- 段落和段落之间默认有空隙，模拟书本文章分段效果
- 纯普通文本样式
- 与br换行相比，p换行之间有空隙，br之间没有空隙
!DOCTYPE声明
- 告知网页版本
- 不区分大小写
其他
HTML标题
<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>< h1 >~< h6 > 标题有 6 个等级，h1 最大最粗，h6 最小最细 文章主标题/副标题
HTML链接
<a herf="https://www.runoob.com">通过标签a来定义
在herf属性中指定链接的地址
< a > 链接，带 href 属性才能跳转 导航/跳转
HTML图像
<img src="/images/logo.png" width="258" height="39"/> <!--同时写宽度和高度容易拉伸变形，可以只写宽度，高度自动匹配--> <!--末尾的/可要可不要-->其他
< img > 图片，src 决定显示哪张图 插图/头像/LOGO
- 图像的名称和尺寸是以属性的形式提供的
< p > 段落，一段独立的文字 正文内容
< table > 表格，tr 是行，td 是单元格 数据展示
< form > 表单，配合 input 收集用户输入 登录/注册/搜索
< div > 通用容器，最常用的“盒子” 给其他标签分组、布局
文本格式化
b bold粗体
i italic斜体
通常，标签strong替换加粗标签b；em替换i标签。
预格式文本
pre标签
pre标签：浏览器会原样保留标签内部，手动换行，多个连续空格，换行。不会像普通网页自动压缩空白。
pre标签内部也可以写HTML标签，依旧会被解析渲染
又称为按原文显示
计算机输出标签
不同计算机输出标签的显示效果
code：单行小段程序代码，命令，关键字；
-样式：默认等宽字体<code> console.log()</code>kbd：keyboard键盘，标注键盘按键，用户手动输入内容
- 样式：浏览器默认的带按键圆角样式<kbd> Ctrl+S</kbd>tt:打字机文本，teletype，纯等宽字体；HTML5已经废弃，不推荐使用
samp：sampl程序输出样本，程序运行后，打印到控制台的返回结果
<samp>登陆成功</samp>var:variable变量
<var>x</var>+<var>y</var>=10 <var>userName</var>这些标签常用于显示计算机/编程代码
地址
HTML文件中写地址
address：是HTML语义化标签，专门用来标注：作者/联系人信息，站点邮寄地址，邮箱，联系方式
-默认样式：斜体
-自带换行效果，内部可以嵌套a，br等标签（a标签是超链接标签，a是antho锚点，可以实现页面跳转）缩写和首字母缩写
实现缩写和首字母缩写
abbr：定义缩写
表格
1.表格组成（table）
表格标题caption
表格头部thead
表格主题tbody
表格脚注（可有可无）tfoot
表单
定义
是网页中的一个交互区域，收集用户输入的信息。
基本结构
表单控件：按钮，超链接，输入框...
创建
一，form ：
1.action属性：
由谁完成这个活动，网址后面加上"/s"（百度），“search替换www，+/search”(京东);
2.target属性：
“self”表示在本窗口打开，“blank”表示在新窗口打开；
3.method属性：用于控制表单的提交方式，暂时了解
二，input 输入：
1.type控制类型：
“text”文本输入框
“password”密码输入框
“radio”单选按钮输入框
"checkbox"复选框
“hidden”隐藏域：用户不可见的一个区域，提交表单时，携带一些固定数据，防止非法注册
2.name
="wd" （百度），“keyword”（京东）
是一个描述该信息的值，但是不能跟type一样，要有区别
3.value属性
控制input的默认值
单选框和复选框必须要写value，其他可以选择不写
4.maxlength
最大长度限制
5.checked
初始默认选项
三，button 按钮
确认按钮
<!--第一种写法--> <button type="submit">确认</button> <!---这里的submit写不写都可以，在表单里，它是一个默认属性-> <!--第二种写法--> <input type="submit",value="确认"> <!--以上两种写法都不能写name，其他的尽量写name-->重置按钮
<!--第一种写法--> <button type="reset">重置</button> <!--第二种写法---> <input type="reset" value="点我重置">点击重置，恢复到设置默认值的位置
普通按钮（不引起表单提交，重置的按钮）
<!--第一种写法--> <button type="button">检测账户是否被注册</button> <!--第二种写法--> <input type="button" value="普通按钮">后续通过js完善普通按钮的功能
注意：普通按钮的type值是button，若不写type的值则是submit，会引起表单的提交
五，textarea文本域
name
cols：列数
rows：行数
<textarea name="x" cols="x" rows="x"></textarea>可以换行，input不可以换行
六，select选择框
option提供每个选项
value（有value值时，收集数据时，电脑拿走的是value值；没有value值时，电脑拿走的是选项的文本）
selected（初始默认值）
禁用表单控件
只能看不能改，状态已经固定
<input disabled type="xxx" name="xxx" value="xxx">input textarea button select option 都可以设置disabled属性
label标签
<!--写法一--> <label for="zhanghu"> 账户：</label> <input id="zhanghu" type="text" name="account" maxlength="10"><br> <!--写法二--> <label> <input type="xxx" name="xxx" value="xxx" id="xxx" > </label>通过label标签，点击文字也可以输入对应的内容；不用非得点击输入框
for与id相关联
一般按钮不做相关的label关联
fieldset legend的使用（了解即可）
fieldset 可以为表单控件分组，legend标签是分组的标题
📌 ps：我学会了用 © 打出版权符号 ©，虽然只是个小细节，但看到它在页面上显示出来的时候，有一种“我确实在写网页”的真实感。
让页面不乱码的关键：<meta> 与 <head>
我一开始以为 里的东西不重要，直到发现页面显示乱码。原来 就是告诉浏览器“用 UTF-8 编码来读取这个页面”。没有它，中文就会变成一堆问号。
另外，<title> 决定了浏览器标签页上显示什么文字，也是 SEO 的重要权重项。
CSS 登场：从“毛坯”到“精装”
HTML 搭好骨架之后，页面长这样：黑字白底，从上到下排列。这就是“毛坯房”。CSS 就是给它刷墙、铺地、装灯。
我学到的三种 CSS 写法：
内联样式
- 当特殊的样式需要应用到个别元素时，就可以使用内联样式。在相关标签中用样式属性。样式属性可以包含任何CSS属性
<p style="color:blue;front-size:20px;">这是一个段落.</p>背景颜色
- 背景色属性background_color定义一个元素的背景颜色
<body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style ="background-color:green;">这是一个段落</p> </body>字体，字体颜色，字体大小
- font-family(字体)，color(颜色)，和font-size(字体大小)属性来定义字体的样式
<h1 style="font-family:verdana;">这是一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落.</p> <!--verdana和arial是一种字体的名字，px是像素，网页最基础长度单位—->文本对齐方式
- 使用text-align（文字对齐）属性指定文本的水平与垂直对齐方式
<h1 style="text-align:center;">居中对齐的标题</h1> <p>这一个段落</p>内部样式表
- 当单个文件需要特别样式时，就可以使用内部样式表。在head中通过style标签定义内部样式表
<head> <style type="text/css"> body{background-color:yellow;} p{color:blue;} </style> </head>将行内样式添加到head元素里，style标签中
h1{ color:green; font-size:80px; } <!--CSS-->- 丰富h1里面的文本样式
将内部样式单独存放在一个css文件当中
- 这个文件专门用来进行样式设计
- 这里的内部样式不包含style标签，只包含style标签里面的内容
- css文件和修饰的html文件通过link标签链接
<link rel="stylesheet" href="./position3.css">
外部样式表
- 当样式需要被应用到很多页面时，采用外部样式表，通过修改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="./mystyle.css"> </head>- link 链接 定义资源引用地址，style定义文本样式
- rel关系 stylesheet样式；href写具体位置
h1 { color: blue; font-size: 40px; } 优先级比较 高 平级 行内样式 内部样式&外部样式 平级样式出现冲突时，后来者居上
| 分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
|---|---|---|---|---|
| 行内样式 | 优先级最高 | 1.结构与样式未分离 2.代码结构混乱 3.样式不能复用 | 很低 | 当成标签 |
| 内部样式 | 1.样式可复用2.代码结构清晰 | 1.结构和样式没有彻底分离2.样式不能多页面复用 | 一般 | 当前页面 |
| 外部样式 | 1.样式可多页面复用2.代码结构清晰3.可出发浏览器的缓存机制4.结构与样式彻底分离 | 需要引入才能使用 | 最高 | 多个页面 |
- 行内样式<p style="color: red;"> 临时测试，不推荐正式用
内部样式 <style> 写在\ 里 单页面的样式
外部样式 <link rel="stylesheet" href="style.css"> 多个页面共用，最推荐选择器
💡 我学会了用类选择器（.class）而不是标签选择器（p）来写样式，因为类选择器可以复用，更灵活。
CSS 三大特性
- 层叠性：如果两个选择器设置了同一个属性，后面写的覆盖前面写的。
- 继承性：父元素的 color、font-size 等样式，子元素自动继承。
- 优先级：当多个选择器作用于同一元素，谁的“权重”高就听谁的。
· 大致规则：!important > 行内样式 > ID 选择器 > 类选择器 > 标签选择器
我在这里踩过一个坑：给 p 标签写了蓝色，又给 .text 写了红色，结果发现 .text 生效了——因为类选择器的权重比标签选择器高。
像素与颜色
· 像素与颜色：刚开始不理解 px 和 % 的区别，后来发现 px 是固定的，% 是相对于父元素的。
像素
生活的长度单位km，m等不能代替网页中的px像素单位，网页无法识别；
cm，mm可以被识别，产生效果；微米，纳米无法识别。
但是在网页中使用cm，mm，是不够精细的，二者之间的跨度差距太大，精度不满足网页设计要求，于是产生了像素。
- 像素是相对单位；cm是绝对单位
- 像素点越小，呈现的图像越清晰细腻
· 字体与文本属性：一开始分不清 font-size（字的大小）和 font-family（字的样式）。后来记住了：font-size 管大小，font-family 管长得像谁。
字体大小
- 属性名：font-size
- 语法
```
div{
font-size: 40 px;
}
字体族
族，家族，一群字
font-family
字体风格
指字体是斜体还是非斜体
字体粗细
- font-weight
如果你也在学习前端，欢迎在评论区交流你的第一周学习经历——我们都在同一条路上
...全文
请发表友善的回复…
发表回复
