Javaweb第一章、HTML和CSS

第一部分、HTML

一、HTML解释

HTML是Hyper Text Markup Language的缩写，意思是『超文本标记语言』

HTML是一种标记语言，它包含很多标签，标签是通过一组尖括号+标签名的方式来定义的：

html 复制代码

<p>HTML is a very popular fore-end technology.</p>

一般的标签包含开始标签和结束标签，还有一些标签是单标签，有的时候标签里还带有属性：

html 复制代码

<a href="http://www.xxx.com">show detail</a>

href="www.xxx.com"就是属性，href是属性名，"http://www.xxx.co...

二、HTML标签结构

所有结构可以看这张图：

三、基础标签介绍

1. 标题标签

只有<h1>到<h6>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

</body>
</html>

2. 段落标签

html 复制代码

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

align="left/right/center"表示对齐方式

3. 超链接标签

html 复制代码

<a href="page02-anchor-target.html">点我跳转到下一个页面</a>

href可以指定跳转的页面

target属性设置哪个目标进行跳转：

_self : 表示当前页面（默认值）
_blank : 表示打开新页面来进行跳转

相对路径和绝对路径

不管是Windows系统还是Linux系统环境下，目录结构都是树形结构，编写路径的规则是一样的

相对路径都是以当前位置为基准来编写的，绝对路径要求必须是以正斜线开头。这个开头的正斜线在整个服务器访问地址中对应的位置如下图所示：

这里标注出的这个位置代表的是服务器根目录，从这里开始我们就是在服务器的内部查找一个具体的Web应用。

所以我们编写绝对路径时就从这个位置开始，按照目录结构找到目标文件即可。拿前面相对路径中的例子来说，我们想在a.html页面中通过超链接访问z.html。此时路径从正斜线开始，和a.html自身所在位置没有任何关系

4. 换行标签

html 复制代码

hello <br/>world

5. 无序列表(unordered list)

html 复制代码

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

序号类型有：disc（默认值,实心圆点）、circle（空心圆环）、square（空心正方形）

6. 有序列表(ordered list)

html 复制代码

<ol type="i" start="2">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ol>

序号类型：1（阿拉伯数字）、A（大写字母）、a（小写字母）、I（大写罗马字母）、i（小写罗马字母）

7. 图片标签

html 复制代码

<img decoding="async" src="/images/logo.png" width="258" height="39" alt="Big image"/>

src指定图片位置，width指定图片宽度，height表示图片高度，alt表示图片说明

8. 块标签

html 复制代码

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>

<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

div是前后有换行的块，span是前后没有换行的块

9. 横线、字体加粗、字体倾斜标签

html 复制代码

<hr/>
<b> 或<strong>
<i>

hr标签可以添加size，width，color等属性

10. 上下标字标签

html 复制代码

<sub></sub>
<sup></sup>

11. 表格标签

html 复制代码

<table align="center" border="1"  cellspacing="0" cellpadding="10">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>住址</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>22</td>
        <td>18524112625</td>
        <td>河北省廊坊市</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>52</td>
        <td>17621152822</td>
        <td>四川省成都市</td>
    </tr>
</table>

有几行由tr标签表示，每行有几列由td标签表示，表头用th表示，border表示边界，align表示是否居中， cellspacing表示表格间距， cellpadding表示表格距离字体间距

rowspan可以将列合并，colspan可以将行合并，如下：

序号	姓名	年龄	电话	住址
1	张三	22	18524112625	河北省廊坊市
2	张三	22	18524112625	河北省廊坊市
3

12. 表单标签

用户注册信息
用户名称:
用户密码:
确认密码:
选择你喜欢的运动项目: 篮球
足球
手球
请选择性别 : 男
女
请选择城市: --选择-- 成都北京上海
自我介绍:
选择你的文件(头像)

get：请求不安全、有长度限制；post：请求数据包含在http请求中

13. frameset标签

frame标签已经被淘汰了，不用了解

html 复制代码

<frameset rows="20%,*">
    <frame src="frames/up.html"/>
    <frameset cols="30%,*">
        <frame src="frames/left.html"/>
        <frameset rows="80%,*">
            <frame src="frames/right.html"/>
            <frame src="frames/down.html"/>
        </frameset>
    </frameset>
</frameset>

14. iframe标签

html 复制代码

<iframe src="frames/up.html" width="100%"></iframe>
<iframe src="frames/left.html" width="20%"></iframe>

四、符号介绍

第二部分、CSS

一、案例

CSS语法：

css 复制代码

选择器{
	样式声明;
    样式声明;
	样式声明;
}

p{ color: black; }

这是段落1

这是段落2

二、CSS样式添加方式

直接在style中添加CSS样式

css 复制代码

<p style=" color: red">这是段落1</p>

在head中，使用style标签定义CSS样式

#txt{ width: 300px; height: 200px; color: brown; background-color: cornsilk; }
div1

div2

div3

直接写在文件里，html引用该文件

html 复制代码

<link rel="stylesheet" href="test.css"/>

三、选择器类型

id选择器：用#表示，#id{xxx;xxx}
class选择器：用.表示，.class{xx,xx}
元素选择器：什么都不加，element{xxxx,xxxx}

优先级：行内样式 > ID 选择器 > class 选择器 > 元素选择器

当然还可以使用组合选择器：

选择器1,选择器2,选择器n{ 属性1:值1; 属性值2:值2}