Javaweb第一章、HTML和CSS

第一部分、HTML

一、HTML解释

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

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

HTML is a very popular fore-end technology.

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

show detail

href="https://juejin.cn/post/www.xxx.com"就是属性，href是属性名，"http://www.xxx.co…

二、HTML标签结构

所有结构可以看这张图：

三、基础标签介绍

1. 标题标签

只有到

    
    Title



    这是一级标题
    这是二级标题
    这是三级标题
    这是四级标题
    这是五级标题
    这是六级标题

2. 段落标签

这是一个段落

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

3. 超链接标签

点我跳转到下一个页面

href可以指定跳转的页面

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

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

相对路径和绝对路径

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

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

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

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

4. 换行标签

hello world

5. 无序列表(unordered list)

    Apple
    Banana
    Grape

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

6. 有序列表(ordered list)

    Apple
    Banana
    Grape

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

7. 图片标签

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

8. 块标签

This is a div block
This is a div block

This is a span block
This is a span block

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

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

 或

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

10. 上下标字标签

11. 表格标签

    
        序号
        姓名
        年龄
        电话
        住址
    
    
        1
        张三
        22
        18524112625
        河北省廊坊市
    
    
        2
        李四
        52
        17621152822
        四川省成都市
    

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

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

12. 表单标签

用户注册信息
用户名称:
用户密码:
确认密码:
选择你喜欢的运动项目:
篮球
足球
手球
请选择性别 :
男
女
请选择城市:

--选择--
成都
北京
上海

自我介绍:

选择你的文件(头像)

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

13. frameset标签

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

14. iframe标签

四、符号介绍

第二部分、CSS

一、案例

CSS语法：

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

p{
color: black;
}

这是段落1

这是段落2

二、CSS样式添加方式

• 直接在style中添加CSS样式

这是段落1

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

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

div1
div2
div3

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

三、选择器类型

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

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

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

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