HTML及CSS选择器
- 一、html基本结构
- 二、html标签
- 1、标题标签
- 2、a标签
- 3、img标签
- 4、div和span标签
- 5、列表标签
- 6、表格标签
- 7、form表单
- 8、select下拉框标签
- 9、textarea标签
- 三、CSS
- 1、css样式引入方式
- 2、标签嵌套
- 3、css选择器
一、html基本结构
html是一种超文本标记语言，进行网页页面的文本编辑
html注释写法：
基本结构如下：
我是标题
link图标：
标题图标：
写法：
我是标题
二、html标签
标签写法分类：
1、全封闭标签，如
xxx
标签属性：
xxx
xx:属性名 ss:属性值2、自封闭标签：
1、标题标签
-：表示一级标题到六级标题 我是标题公司Asir Bsir 小王
小李
小赵
小
胡
胡
小周
小李
页面效果：
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?
