HTML+CSS初探

往底层挖矿
131 阅读8分钟

HTML

属性

<p class="shuxing">这是内容</p>
属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，shuxing 是属性的值 。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

  • 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
  • 属性的名称，并接上一个等号。
  • 由引号所包围的属性值。

元素

<p>这是内容</p>

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  • 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素嵌套

<p>这是<strong>内容</strong></p>
也可以将一个元素置于其他元素之中 —— 称作嵌套。要突出内容，可以将 “内容” 用 <strong> 元素包围，爆字将突出显示。必须保证元素嵌套次序正确：本例首先使用 <p> 标签，然后是 <strong> 标签，因此要先结束 <strong> 标签，最后再结束 <p> 标签。

空元素

不包含任何内容的元素称为空元素。比如 <img> 元素：
<img src="xxx" alt="测试图片">
本元素包含两个属性，但是并没有 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

完整HTML文档

一个完整的 HTML 页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>
  • <!DOCTYPE html> — 文档类型。DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。
  • <html></html> — <html> 元素。该元素包含整个页面的内容，也称作根元素。
  • <head></head> — <head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
  • <title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  • <body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容

图像

<img>元素
<img src="图片地址" alt="测试图片">

  • src属性：包含图像文件路径的地址属性
    • 绝对路径
    • 相对路径
  • alt属性：一个替换文字属性，是图像的描述内容，用于当图像不能被用户看见时显示
    • 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容
    • 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到

视频

<video> 允许你轻松地嵌入一段视频。一个简单的例子如下：

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • src 同 <img> 标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。
  • controls 用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

标题

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

段落

<p>这是一个段落</p>

列表

  1. 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul>元素包围
  2. 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围
  3. 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
    嵌套 <ul> 和 <ol>
<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

连接

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>
在完成一个链接后，可以试着点击它来确保指向正确。

第一个表格

<table>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
<table>
  • 每一个表格的内容都包含在这两个标签中 :
    . 在你的 HTML 的 中添加这些内容
  • 在表格中，最小的内容容器是单元格, 是通过 元素创建的 ('td' 代表 'table data')
  • 使用 <th> 元素添加标题

允许单元格跨越多行和列

  • 使用 colspan占单元格的宽度
  • 使用 rowspan占单元格的高度

表单

所有HTML表单都以一个<form>元素开始：

<form action="/my-handling-form-page" method="post" name="user_name">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name">
    </div>
    <div>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_mail">
    </div>
    <div>
      <label for="msg">Message:</label>
      <textarea id="msg"></textarea>
    </div>
    <div class="button">
 	<button type="submit">Send your message</button>
    </div>
</form>
  • action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理
  • method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”)
  • 使用 name 属性来收集特定的数据块
  • <button>元素也接受一个 type属性，它接受submit, reset或者 button 三个值中的任一个
  • <label>, <input> 和 <textarea> 元素

CSS

CSS规则

h1{
    color:red;
    background-color: lightblue;
    text-align: center;
}

CSS规则 = 选择器 + 声明块

选择器

  • 通配符选择器 ：*
  • 标签选择器 ：标签名 {}
  • id选择器 ：#id名:{} (#号和id名紧挨着)
  • 类选择器 ：.类名 {} (由.和类名组成，.紧跟在类名前边，与id选择器类似)
  • 后代选择器 ：每一层选择器用空格隔开
  • 子代选择器 ：父元素选择器 > 子元素选择器 { }
  • 相邻兄弟选择器 ：元素选择器 + 元素选择器 {}
  • 交集选择器 ：同时选中两个选择器都具有的元素
  • 并集选择器 ：逗号隔开每一个选择器
  • 伪类选择器 ：CSS 伪类用于向某些选择器添加特殊的效果
  • 伪元素选择器 ：CSS 伪元素用于向某些选择器设置特殊效果，before和after常用

声明块

出现在大括号中，声明块中包含很多声明（也叫作属性），每一个声明表达了某一方面的样式规则

代码书写位置

  • 内部样式表 书写在style元素中 通常把style元素放在head元素中，为的是浏览器在读取网页时最先加载出CSS代码
  • 内联样式表（元素样式表） 在元素上添加style属性，直接把样式添加到属性中
  • 外部样式表（常用） 将样式书写到独立的CSS文件中

CSS常用属性

  • 去掉下划线 ：text-decoration:none ;
  • 加上下划线： text-decoration: underline;
  • 调整文本和图片的位置（也就是设置元素的垂直对齐方式）：vertical-align:-20px;
  • 外边距：margin
  • 内边距：padding
  • 居中；margin 0 auto;(只是针对盒子居中)
  • 内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签:
    1. 将内联标签转换成块级标签：display:block;
    2. 将块级标签转换成内联标签：display:inline;
    3. 块级内联标签：display；inline-block;
  • 隐藏的两个方法：
    1. display:none; #隐藏了会顶上去
    2. visibility :hidden; #隐藏了不会顶上去
  • 隐藏溢出的两个方法：
    overflow :auto
    overflow :scoll; #带滚动条
  • 文本水平居中：text-align:center;
    文本垂直居中：line-height;
  • 伪类
    1. 没访问之前：a:link{color:red;}
    2. 鼠标悬浮时：a:hover{color:green;}
    3. 访问过后：a:visited{color:yellow;}
    4. 鼠标点击时: a:active{color:blue;}
  • position的四种属性
    1.static：默认位置
    2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
    3.relative:相对定位(参照的是自己本身的位置)，没有脱离文档流，没有顶上去，会保持自己的位置不动。可以使用top left进行定位
    4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位，如果找不到会按body的去找）
    注意！！：将定位标签设置为absolute，将他的父级标签设置为定位标签 (relative)
  • float和position的区别
    + float：半脱离文档流
    + position：全脱离文档流
  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

层叠性(权重比较）

B9EFmT.png

继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标 签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

avatar
文章
阅读
粉丝