HTML/CSS

HTML

HTML概念先导

HTML 指的是超文本标记语言: HyperText Markup Language。准确来说，HTML不是编程语言而是标记语言，由各种HTML元素（HTML标签和HTML内容）组成。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>	//声明为HTML5文档
<html>			//HTML页面的根元素
<head>			//包含文档的元(meta)数据
<meta charset="utf-8">	//定义网页编码格式为"utf-8",否则中文网页可能出现乱码
<title>Theo</title>		//描述了文档的标题
</head>
    
<body>			//包含了网页的可视内容
<h1>我的第一个标题</h1>   //大标题
<p>我的第一个段落。</p>	  //段落
</body>
    
</html>

html可视化,只有 < body >区域才会在浏览器中显示

HTML元素

  • HTML标签

HTML标签一定要配套有开始标签和结束标签，虽然有些浏览器可以读取不闭合标签，但还是建议使用闭合标签。

值得注意的是，有些单标签< br>在XHTML后要求加入/来表示自行封闭。< br/>等同于< br>…< /br>

标签 描述
< hr/> 定义水平线
<!- - 内容 - -> 定义注释
< br/> 不产生新段落的情况下换行

更多标签见 HTML 标签参考手册。

  • HTML属性

HTML属性一般出现在开始标签中，HTML属性以键值对的形式出现，属性值多被双引号包括，除非属性值本身带有双引号字符，这时需要用单引号包括属性值。

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

更多属性值见HTML 标准属性参考手册.

  • HTML文本格式化标签
标签 描述
< b> 定义粗体文本
< em> 定义着重文字
< i> 定义斜体字
< small> 定义小号字
< strong> 定义加重语气
< sub> 定义下标字
< sup> 定义上标字
< ins> 定义插入字
< del> 定义删除字 
1
2
3
<p>
    <b>粗体<em>加重</em></b>,<i>斜体<small>小号</small></i>,<sup>上</sup><ins>插入字</ins><del>删除字</del><sub>下</sub>
</p>

粗体加重,斜体小号,上插入字删除字下

  • HTML代码
标签 描述
< code> 定义计算机代码
< kbd> 定义键盘码
< smap> 定义计算机代码样本
< var> 定义变量
< pre> 定义预格式文本 
1
<code>printf("HELLO WORLD");<var>int i;</var></code>

printf("HELLO WORLD");int i;

  • HTML引文
标签 描述
< abbr> 定义缩写
< address> 定义地址
< bdo> 定义文字方向
< blockquote> 定义长的引用
< q> 定义短的引用语
< cite> 定义引用、引证
< dfn> 定义一个定义项目。 
1
2
3
<p>
    <abbr title="Tan ZhiQiang">TZQ</abbr>住在<address>China</address>;<bdo dir="rtl">从右到左读</bdo>
</p>

TZQ住在

China
;从右到左读

  • HTML头部
标签 描述
< head> 定义了文档的信息
< title> 定义了文档的标题
< base> 定义了页面链接标签的默认链接地址
< link> 定义了一个文档和外部资源之间的关系
< meta> 定义了HTML文档中的元数据
< script> 定义了客户端的脚本文件
< style> 定义了HTML文档的样式文件 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Theo</title>
<base href="https://sirius-tzq.github.io/" target="_blank">
</head>
<body>

<p><img src="logo.png" ></p>
<!--注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://sirius-tzq.github.io/logo.png"-->
<p><a href="about">琅然的Blog</a></p>
<!--注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。-->
</body>
</html>

琅然的Blog

HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本域

1
2
3
4
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name:
Last name:

表单中需要输入明文文本时需要用到文本域，通常浏览器中表单长度为20个字符

密码字段

1
2
3
<form>
Password:<input type="password" name="password">
</form>
Password:

表单需要输入暗文文本时需要用到密码字段

单选按钮

1
2
3
4
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female

复选框

1
2
3
4
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a bike
I have a car

用户需要从若干给定的选择中选取一个或若干选项。

提交按钮

1
2
3
4
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:

  1. 提交按钮中的value指的是按钮上的文本，而其他HTML表单中的value与name组成提交的数据，如name:value

  2. <form ...>参数：name指明提交的数据包名,action指明数据包传送的地点,method指明了数据包传送时遵守的HTTP方法.

  3. action的值可以是绝对路径,指向其他站点；也可以是相对路径，指向本站的其他文件。

目前前端最为基本的知识介绍到这，至少保证我写Servlet的时候能看得懂前端部分。关于HTML的坑有机会再来填吧。

CSS

CSS概念先导

CSS 指层叠样式表 (Cascading Style Sheets)，是在已经写好了HTML代码后对网页的显示样式进行的一种规定，比如标题字体大小，背景颜色等等。也可以粗略理解为制定网页的主题，但是网页的内容和排版是不变的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>琅然</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:tan;}
p    {font-size:20pt;margin-left:30px;}
a:link    {color:green;}	//链接未被点击过的颜色
a:visited {color:red;}		//连接已被点击过的颜色
a:hover   {color:black;}	//鼠标放到链接上时的颜色
a:active  {color:blue;}		//链接被鼠标点击时的颜色
</style>
</head>

<body>

<h1>这是标题</h1>
<hr>

<p>你可以看到这个段落是被设定的 CSS 渲染的。</p>

<p><a href="https://www.runoob.com" target="_blank">这是一个链接</a></p>

</body>
</html>

可以查看 渲染效果

  • CSS语法

CSS由选择器和声明组成，放在<head><style>...</style></head>元素中。选择器是你希望改变的属性样式，具体改变内容由声明表示。声明以键值对形式表现，每个声明都以;结束，所有声明用{}括起来。

1
p {color:red;text-align:center;}
  • CSS注释

CSS注释以/* 开始, 以 */结束

CSS选择器

ID选择器

ID选择器可以为声明了相同ID的HTML元素制定样式，对其他未声明该ID的HTML元素没有影响。 ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

1
2
3
4
5
6
<head><stlye>
#para1 {color:red;text-align:center;}
    </stlye></head>

<p id=#para1>hello world</p>	//会被居正标红
<p> hello world</p>

CLASS选择器

CLASS选择器可以为一组声明了相同CLASS的HTML元素制定样式。类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

1
2
3
4
5
6
<head><style>
    .center {color:red;text-align:center;}
    </style></head>

<p class=center>hello world</p>		//居中标红
<h1 class=center>hello world</h1>	//居中标红

CLASS选择器还可以进一步细分p.center {color:red;text-align:center;}，可以选择<p>标签中声明class:center的HTML元素。

CSS样式表嵌入

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

1
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
1
2
3
4
//mystyle.css
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式表

内部样式表用于改变单个文档的样式

1
2
3
4
5
6
7
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

内联样式只适用于对单一HTML元素进行更改，在元素开始标签中添加style属性即可

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果同时引用了外部样式表和内部样式表，并且内外部样式表都对同一HTML元素进行了规定，那么该元素会保留内部样式表的属性，并继承外部样式表中新颖的属性。

1
2
3
4
5
6
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
        h1 {color:red;text-align:right;}
    </style>
</head>
1
2
3
4
5
//mystyle.css
h1 {
	font-size:16pt;
	color:green;
}

那么<body>中所有h1将拥有以下属性:{color:red;text-align:right;font-size:16pt;}

前端

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！