HTML及CSS选择器

一、html基本结构二、html标签1、标题标签2、a标签3、img标签4、div和span标签5、列表标签6、表格标签7、form表单8、select下拉框标签9、textarea标签三、CSS1、css样式引入方式2、标签嵌套3、css选择器

一、html基本结构

html是一种超文本标记语言，进行网页页面的文本编辑

html注释写法：

基本结构如下：

我是标题

link图标：

标题图标：

写法：

我是标题

二、html标签

标签写法分类：

1、全封闭标签，如

xxx

标签属性：

xxx

xx:属性名 ss:属性值

2、自封闭标签：

1、标题标签

-

：表示一级标题到六级标题

我是标题公司AsirBsir

小王

小李

小赵

小

胡

小周

小李

页面效果：

2、a标签

跳转对应网址的页面

未访问之前是蓝色字体，访问后变紫色

# 要a标签的效果，但不刷新或跳转页面：

xxx

xxx

锚点：

页面内容进行跳转

标签设置id属性=值(xx),a标签href属性的值写法href=’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置

我是标题

顶部位置公司potal百度 potalpotal回到顶部

页面效果：

可通过第二个按钮跳转到百度：

3、img标签

img标签：页面插入图片

src属性：图片路径 必须写

alt属性：图片加载失败或者正在加载时提示的内容

title属性：鼠标悬浮时显示的内容，不是img标签独有的

width：设置图片宽度(建议用css设置)

height：设置图片高度(建议css设置)

我是标题

页面效果：

4、div和span标签

没有任何文本修饰效果：

我是标题小王

小李

小文小林

页面效果：

扩展：标签分类

块级标签(行外标签)：独占一行，h1-h6、p、br、hr、div、ul、li

块级标签可以包含内联标签，以及某些块级标签

内联标签(行内标签)：不独占一行，img/a/span，只能包含内联标签，不能包含块级标签

5、列表标签

1)ul标签：

写法：

内容1内容2......

2)ol标签

写法：

内容1内容2......

3)dl标签

无空位内容有空位内容......

页面效果：

6、表格标签

可以在网页中生成表格

写法：

表头1表头2...内容1内容2...

colspan：横行合并

rowspan：纵列合并

示例

我是标题

名称 年龄 爱好 小王 18 篮球 小李 20 游泳 小王

页面效果：

7、form表单

action属性：指定提交路径，提交到哪里去

form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径

input标签 输入框：

input标签，如果要提交数据，一定要写name属性

普通文本输入框 密文输入框 提交按钮 触发form表单提交数据动作 重置按钮 清空输入内容 不会触发form表单提交数据的操作 时间日期输入框 文件选择框 纯数字输入框

单选框：

多选框：

单选框和多选框请务必加name属性和value默认值

单选和多选value默认值可将存储的数据变短

我是标签

欢迎来到xxx公司

用户名：

密码：

性别： 女 男

爱好： 篮球 足球 乒乓球 数字：

页面效果：

8、select下拉框标签

示例：

我是标签选择性别：男女

喜欢的明星：明星1明星2明星3

页面效果：

9、textarea标签

多行文本输入框

我是标签请输入内容：

页面效果：

三、CSS

1、css样式引入方式

第一种：

直接在头部添加

我是标题

helloHow are you?