这里是一篇学习周报，记录我学习前端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：我学会了用 &copy; 打出版权符号 ©，虽然只是个小细节，但看到它在页面上显示出来的时候，有一种“我确实在写网页”的真实感。

让页面不乱码的关键：<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>
  

  style标签用来专门包裹css样式代码；css语法：选择器{属性：值；}

  将行内样式添加到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;
    }
    

  • 优先级比较	高	平级
    	行内样式	内部样式&外部样式
    平级样式出现冲突时，后来者居上

• 行内样式<p style="color: red;"> 临时测试，不推荐正式用
  内部样式 <style> 写在\ 里 单页面的样式
  外部样式 <link rel="stylesheet" href="style.css"> 多个页面共用，最推荐

  选择器

💡 我学会了用类选择器（.class）而不是标签选择器（p）来写样式，因为类选择器可以复用，更灵活。

CSS 三大特性

1. 层叠性：如果两个选择器设置了同一个属性，后面写的覆盖前面写的。
2. 继承性：父元素的 color、font-size 等样式，子元素自动继承。
3. 优先级：当多个选择器作用于同一元素，谁的“权重”高就听谁的。
      · 大致规则：!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

如果你也在学习前端，欢迎在评论区交流你的第一周学习经历——我们都在同一条路上