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个元素,分别是tabletheadtbodytrthtd
    • <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 />不同,文本域是成对出现的,且标签之间的是默认输入。

其中rowscols分别控制 行数列数

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

CSS

CSS样式的三种放置位置:

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

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

选择器

继承

排版加强