HTML和CSS的笔记

发表于 更新于

学习HTML/CSS的笔记。

HTML

HTML有众多的标签，记录一些比较常用的。

首先HTML文本的格式大致如下：

1
2
3
4
5
6
7
<!DOCTYPE HTML>
<html>
    <head>xxx</head>
    <body>
        xxx
    </body>
</html>

head标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

在head标签种常用的子标签有：

1
2
3
4
5
6
7
<head>
    <title>...</title>  <!--标题-->
    <meta>
    <link>
    <style>...</style>  <!--样式-->
    <script>...</script>
</head>

body标签

body标签中的内容会出现在网页上。

标题

html提供六种不同级别的标题<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，类似markdown的#。准确的说，markdown的标题标记是基于html的。

段落

每个段落都由一组<p> </p>标注。

不过有时候使用<br>（或<br/>）也可以做到段落分离的效果。<br>可以看作是HTML中的\n。

段落之间的分离效果不明显的话，可以用<hr>画出一条分割线，对应markdown中的---。

文字特效

强调

  • 斜体：_<em> </em>_。对应Markdown中的单下划线_。使用<address> </address>的视觉效果和斜体差不多。
  • 粗体：__<strong> </strong>__。对应Markdown中的双下划线__

空标签

  • HTML还有一种自定义的标签<span> </span>，在CSS的配合下，可以为这种标签设置单独的样式。

引用

  • <q> </q>：在标签之间的文本会被打上引号……之后配合上CSS才会体现出该标签的作用
  • <blockquote> </blockquote>：很好看的引用样式，相当于自称一段，并且带有 左右缩进特效

（没有啥用的）空格

  • 如果直接敲空格键是没有用的，html会把多余1个的连续空格看作1个空格，需要用&nbsp;。

代码

  • <code> </code>：行间代码显示
  • <pre> </pre>：整段代码注释

链接

  • <a>text</a>：最常用的超链接。使用href=标明链接地址，当然也可以是邮箱；target="_blank"表示在新tag上打开链接
  • <img />：图片，单标签。src=指向图片地址；alt="替换"可以在图片打不开时用文字描述；当鼠标在图片上时，html会显示title=字段
1
2
<a href="mailto:xxx@qq.com">发我邮箱</a>
<img src="logo.jpg" title="logo" alt="logo不见了">

更加清晰地展现

逻辑顺序

  • 有序（ordered，<ol> </ol>）
  • 无序（unordered，<ul> </ul>）
1
2
3
4
5
6
7
8
9
10
11
<ol>            <!-- 无序列表 -->
    <li> </li>  <!-- list item -->
    ...
    <li> </li>
</ol>

<ul>            <!-- 有序列表 -->
    <li> </li>
    ...
    <li> </li>
</ul>

关系型逻辑

  • 表格<table> </table>是比列表更强大的展现方式，因为他具有多维。表格有6个元素，分别是table、thead、tbody、tr、th、td。
    • <table> </table>包裹着整个表格。
    • <thead>和<tbody>并不是必须的，但是使用这些标签，table可以按结构一块块的显示，不在等整个表格加载完后显示，起到加速展示的效果。
    • tr：table row，表格的一行。
    • th：表格中的属性值。
    • td：表格中的一个单元格。

一个通常意义上的表格如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <caption>标题</caption>
    <thead>         <!-- 表格头部 -->
        <tr>
            <th></th>
            ...
            <th></th>
        </tr>
    </thead>
    <tbody>         <!-- 表格主体 -->
        <tr>
            <td></td>
            ...
            <td></td>
        </tr>
    </tbody>
</table>

逻辑独立性

  • <div> </div>：如果一个page是从头到尾线性结构的，就会缺乏美感和逻辑独立性，使用div来划分文档的模块

表单交互

<form> </form> 是浏览器和服务器交互的媒介，是十分重要的一部分。表单由<input />提供数据。<form> </form>之外的数据不会被提交。

<form>有以下常用属性：

  • action，输入的数据被传送到的地方,比如一个PHP页面(do.php)
  • method，数据传送的方式（get/post）
1
2
3
4
5
<form action="do.php" method="post">
    <input />
    <input />
    <input />
</form>

<input /> 是单标签，但是具有很大的灵活性，其功能会随着type属性而变化。

常用属性：

  • type：<input>的类型
    • text：普通文本输入
    • password：密码，
    • radio：单选框，
    • checkbox：多选框，
    • submit：提交按钮，
    • reset：复位按钮，
  • name：控件命名，同一组选择框的name需要相同
  • value：提交给后端的值
  • checked：对于选择框而言，是否默认选择
  • id：每个标签具有唯一id，可以让CSS选择器做选择

<select> </select> 是多选框的一种，但是可以折叠选项，节约空间。

<select>标签的属性有multiple="multiple"，可以将单选（默认）切换成多选

<option>选项有默认选项属性selected="selected"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<label>单项选择题：</label>
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

<label>多项选择题：</label>
<select multiple="multiple">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

上面的效果如下：

<label> </label> 也是很有用的标签，其作用相当于是扩大了选择标签的点击范围。使用for属性选择对应id的选择框。

1
2
3
<label for="A">A</label> <input type="radio" id="A" name="test" />
<label for="B">B</label> <input type="radio" id="B" name="test" />
<label for="C">C</label> <input type="radio" id="C" name="test" />

<textarea> </textarea> 是给长文本输入准备的。需要注意的是，和<input />不同，文本域是成对出现的，且标签之间的是默认输入。

其中rows和cols分别控制 行数 和 __列数__。

1
<textarea rows="3" cols="20">长文本输入：</textarea>

CSS

CSS样式的三种放置位置：

  • 内联：直接写在标签中，如<p style="color:red"> </p>
  • 嵌入式：在当前html文件的<head> </head>之间创建一对<style type="text/css"> </style>
  • 外部式：在一个.css文件中书写

如果定义了多个样式，那么这些样式的优先级一般满足：内联 > 嵌入式 > 外部式

选择器

继承

排版加强