郝郝郝郝_七
郝郝郝郝_七

HTML及CSS基础入门：web前端基础，看这一篇就够了

写在开头：这是一篇有关于HTTP和CSS的基础入门教程。你也可以将他当作一本字典，因为我将所有可能用到的语法结构全部设置了标题，你只需要点击标题即可跳转过去。同时，我在最后放置了两个CSS实战，以供读者练习使用。这是一篇十分值得收藏的web前端基础文章，希望对看到的读者有所帮助。

web入门

  • HTTP基础
    • HTML文本标签
      • 1.块标签和内联标签
      • 2.标题标签
      • 3.段落标签
      • 4.内联标签``
      • 5.内联标签``
      • 6.图片标签
        • img插入动图
      • 7.连接标签
      • 8.列表
    • HTML表单标签
      • 1.form标签
      • 2.单行文本输入框
        • 1.占位文本placeholder
        • 2.输入框名字name
        • 3.输入框的值value
        • 4. 不可修改的输入框 “readonly”和“disabled”
      • 3.多行输入文本框
      • 4.密码输入框
      • 5.单选框和复选框
        • 性别单选题（单选框）
        • 兴趣多选题（复选框）
      • 6.选项菜单
      • input总结
  • css基础
    • CSS美化文档
      • 1.字体大小
      • 2.字体粗细
      • 3.颜色
        • 1.英文字母形式
        • 2.十六进制颜色
        • 3.rgb形式
        • 4.rgba形式
        • 注意：
      • 4.文字行高
      • 5.字间距
      • 6.字体
    • CSS的三种引入方式
      • 1.行内样式
      • 2.内部样式
      • 3.外部样式
        • **link标签**
    • 常用选择器
      • 1.标签选择器
        • **标签选择器的层叠性**
      • 2.类选择器
        • **选择器的层叠性**
      • 3.id 选择器
    • 高级选择器
      • 1.后代选择器（空格）
        • 重点理解后代
      • 2.交集选择器
      • 3.子选择器
      • 4.并集选择器
      • 5.选择器的优先级
        • 单个选择器的优先级
        • 文字属性的继承性
        • 高级选择器的优先级
          • 权重的计算方法
          • 权重的应用
    • 盒模型
      • 1.内容区content
        • **百分百尺寸**
      • 2.内边距padding
      • 3.padding边框设置不同格式
        • **1. 上下一样，左右一样**
        • **2. 上下一样，左右不一样**
        • **3. 上下不一样，左右一样**
        • box-sizing
      • 边框border
        • **分别设置边框**
        • **利用层叠性设置边框**
        • **无边框**
        • **圆角**
        • **圆角分开设置**
        • **阴影**
      • 4.外边距margin
        • **盒子左右居中**
      • 5.display：block/none
        • **行内元素和块元素之间的转换**
          • **行内元素转块元素**
          • **块元素转行内元素**
        • **display: none**
      • 6.display：inline/inline-block
        • **inline-block**
        • 空白折叠
          • 1.去除回车
          • 2. 给父元素添加 word-spacing 属性
          • 3. 给父元素设置 font-size: 0px;
    • CSS定位
      • 1.position - static （默认定位）
      • 2.position - relative（相对定位）
      • 3.position - absolute（绝对定位）
      • 4.position - fixed（固定定位）
        • z-index
        • 拓展阅读：position-sticky（粘性布局）
      • 5.Float
    • 定位实战：模态框
        • 第一步：完成半透明背景
        • 第二步：完成模态框内部
          • **元素水平居中**
          • **元素垂直居中**
        • 第三步：完成模态框布局
    • 定位实战：搜索框
      • 第一步：完成搜索框
      • 第二步：完成搜索结果
    • CSS——背景
      • 背景颜色
        • **渐变色**
        • **渐变方向**
        • **渐变位置**
      • 背景图片
        • 1. 背景图片出现了重复：background-repeat:no-repeat
        • 2.背景图片不居中：background-position:center
        • 高级特性——背景图片撑满整个容器：background-size
        • background 合并写法
        • 其他属性

HTTP基础

HTML文本标签

1.块标签和内联标签

​ 内联标签不会为自己的被人占据新的一行，将会和前面的文字显示在同一行，如img标签，a标签，span标签，strong标签等。

​ 块标签会为自己的内容占据新的一行，而与前面的空位将会用占位符代替，如p标签，标题标签，div标签等。

2.标题标签

​ HTML提供了六个标签来表示文章的标题，分别是

~
，字数越大级别越低，对应的子就越小。

HTML及CSS基础入门：web前端基础，看这一篇就够了_第1张图片

注意，标题之间不可越级，这样会导致文章失去清晰的结构。

3.段落标签

​ 段落标签

是HTML里最常用的一个标签，是一个块状标签，代表文章中的一个段落（paragraph）。

HTML及CSS基础入门：web前端基础，看这一篇就够了_第2张图片

4.内联标签

​ 此标签说明它包含的内容有很强的重要性，需要引起注意。浏览器会粗体显示内容。

<p>一句话中的<strong>重点内容strong>p>

显示效果：

一句话中的重点内容

小知识：标签页能使内容变粗，但没有语义，只是单纯的表示样式加粗。

5.内联标签

下面的段落中，我们将岛名“Maldives”用包裹起来。 这是一个内联标签（即不会产生换行），通常表示一个行内短语，使用可以使网页更有条理。 标签可以使文本变粗体，则不是这样的，如果没有加样式文件，在样式上与普通文本不会有区别。

HTML及CSS基础入门：web前端基础，看这一篇就够了_第3张图片

显示效果：HTML及CSS基础入门：web前端基础，看这一篇就够了_第4张图片

6.图片标签

写法如下：

<img src="xxx" alt="" />

src中写入图片的 相对路径 或 绝对路径 就可以啦。

图片标签还有个 alt 属性，这个属性定义了描述图像的替换文本。如果图像的 URL 是错误的，该图像不在 支持的格式 列表中，或者如果图像还没有被下载，用户将看到这里的替换文本。

img插入动图

除了静态的 jpg、jpeg、png 之类的图片，我们还可以用 img 标签向网页中插入 gif 动图哦：

HTML及CSS基础入门：web前端基础，看这一篇就够了_第5张图片

网页显示效果：

HTML及CSS基础入门：web前端基础，看这一篇就够了_第6张图片

7.连接标签

连接标签为内联标签，用户点击后就会跳到对应网址。

<a herf="https://www.csdn.net/?spm=1001.2101.3001.4476">CSDN——专业开发者社区a>

效果如下：

CSDN——专业开发者社区

a标签还可以放置段落，图像，多媒体等等。

下面讲解一下连接标签的重要属性。

  • href——指出链接指向的网址。
  • title——给出链接的说明信息，鼠标悬停时显示。
  • target——指定如何打开链接，它有四个属性值：
    • _self：当前页面打开（默认值）
    • _blank：新页面打开
    • _top
    • _parent

8.列表

​ HTML提供了无序标签

    和有序标签
      ，列表的每一项都用标签
    1. 表示。

      HTML及CSS基础入门：web前端基础，看这一篇就够了_第7张图片

      显示效果：

      • 列出今天要做的事情
      • 们天结束填写回顾与反思
      • 计划第二天的内容

      HTML表单标签

      1.form标签

      我们尝试完成如下表单：

      HTML及CSS基础入门：web前端基础，看这一篇就够了_第8张图片

      ​ 可以看到，在这个注册表单里都是输入框、按钮等表单元素，对于这些表单控件，我们需要用一个块状元素

      把它们包起来，属于同一个表单的表单控件要包含在同一个块状元素里。

      ​ 这个标签有两个属性需要了解：

      • action：一个处理此表单信息的程序所在的 URL，所述表格信息将在表单提交时被发送到定义的地址；

      • method：它的值可以是 GET 或 POST，用来规定如何发送表单信息。

        
<form action="">
  
form>

      2.单行文本输入框

      
<form action="">
  <input type="text" />
form>

      效果如下：

      下面介绍他的几种属性。

      1.占位文本placeholder
      
<form action="">
  <input type="text" placeholder="昵称" />
form>

      效果如下：

      2.输入框名字name

      为了区别于其他input，我们要给昵称输入框加上属性name，在提交表单时就不会和其他数据搞混了：

      <input type="text" placeholder="昵称" name="nick" />
      3.输入框的值value

      如果希望在输入框中预填写用户的昵称，可以用标签属性value：

      <input type="text" placeholder="昵称" name="nick" value="小明" />

      效果如下：

      4. 不可修改的输入框 “readonly”和“disabled”

      ​ 在一些特殊情况中，我们会给用户分配昵称，这个时候并不希望用户可以自行修改，我们可以这么做：

      <input type="text" placeholder="昵称" name="nick" value="小明" readonly />

      ​ 如此便可以把输入框变成 只读 输入框，这样用户就不能自己修改预填写的内容啦。

      ​ 除了用”readonly”这个属性，我们还可以用”disabled”，这个属性也能使用户无法更改输入框中的内容。

      <input type="text" placeholder="昵称" name="nick" value="小明" disabled />

      但是这两个是有一定区别的：

      属性 disabled readonly
      对象 所有表单元素 input 和 textarea
      作用 使文本框不能输入，当表单以 POST 或 GET 的方式提交时，使用了 disabled 的元素的值不会被传递出去 仅使文本框不能输入
      外观 * 使文本框变灰 外观没有变化

      外观 * ：在不同浏览器中输入框的外观可能会有区别，因此“readonly”和“disabled” 这两种输入框在外观上的差别可能与上表所述有所不同。

      3.多行输入文本框

      ​ 图中的个性签名框即为多行输入框。当多行文本框中输入的内容超过一行以后，它就会自动换行。我们使用textarea标签来写多行输入文本框。

      
<textarea
  name="sign"
  rows="5"
  cols="30"
  placeholder="请输入个性签名"
>textarea>

      效果如下：

      rows表示行数，clos表示可视宽度。

      4.密码输入框

      ​ 密码输入框的内容将会以黑色圆点显示，我们只需要把标签属性中的type="text"改为type="password"就可以了：

      
<input type="password" name="password" placeholder="密码" />

      效果如下：

      5.单选框和复选框

      性别单选题（单选框）

      ​ 在这里我们只考虑了男女两种性别，并默认用户只有一种性别。 就像做单选题一样，用户只能选择男性或者女性，因此我们使用单选框实现：

      
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />

      属于同一道单选题的每个单选按钮，应该拥有相同的name属性。

      ​ 这里面value的值是我们要提交上去的值，想要显示出来数据只需要将其加在input标签中就行了。

      <input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女

      效果如下：

      男 女 ​ 此时我们只有点击小圆点时，才能选中性别，这样点击的范围有点小，如果点击文字也能选中对应的性别就更好了。 为了达到这个目的，我们常常会把单选框和标签``配合使用： 
      <label> <input type="radio" name="gender" value="male" />男 label>
<label> <input type="radio" name="gender" value="female" />女 label>

      另一种写法：

      <input id="male" type="radio" name="gender" value="male" />
<label for="male">男label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女label>

      我们给单选框加了一个属性id="male"，给标签也加了一个属性for="male"。这样，两者之间就产生了一一对应的关系。 显示效果： 男
      女 点击播放上述代码：

      代码演示

      兴趣多选题（复选框）

      用户可能对很多领域感兴趣，所以在兴趣的选择上我们要用复选框。img

      ​ 复选框的使用就像一道多选题，用户可以选择多个选项。除此之外，复选框和单选框很像，它的类型是checkbox：

      <input type="checkbox" />

      效果如下：

      ​ 你会在页面上看到一个小方框，点击它，可以看到它被选中了，再次点击，选中会被取消。

      ​ 为了写好我们的兴趣复选框，我们需要在上面这个简单的复选框的基础上，给它们加上文字（配合标签）、name 属性和 value 值：

      <label> <input type="checkbox" name="interest" value="coding" />编程 label>
<label> <input type="checkbox" name="interest" value="other" />其他 label>

      * 属于同一道“多选题”的每个复选框元素，应该拥有 相同 的name属性值。

      ​ 需要注意的是：复选框是只有 2 种状态的表单控件：已选中或未选中。在只有一个复选框的情况下，它允许用户对某事说“是”或“否”，比如同意或不同意某个条款。而只有一个单选框的情况下，用户一旦选择了这个单选框，就不能再取消选择了，除非他刷新了网页。

      6.选项菜单

      ​ 对于职业的选择我们会提供几个固定的选择，而且选项较多，所以我们不采用复选框，而是使用包裹：

      <select name="career">
  <option value="default">请选择职业option>
  <option value="staff">公司职员option>
  <option value="freelancer">自由职业者option>
  <option value="student">学生option>
  <option value="other">其他option>
select>

      效果如下：

      请选择职业 公司职员 自由职业者 学生 其他

      ​ 需要注意的是，这是一个单选菜单，如果用户选择了“学生”，那么提交的数据将会是：career:"student"而不是“学生”，是标签的标签属性value的值。所以每个 option 的 value 值要互不相同。

      如果我们想要的是一个多选菜单，该怎么办呢？

      ​ 很简单，给