Html知识点整理笔记

深碍√TFBOYSˉ_ 2022-05-08 13:14 302阅读 0赞

# Html基础整理 #

--------------------

## 前言 ##

*  @author: zengjiahao
 *  @date: 2018/10/11

## 内容目录 ##

## 文章目录  Html基础整理  前言  内容目录  @\[toc\]  Html5入门及基础01（网页、基础标签、路径）  1.web的三大结构组成  2.标签的分类与关系  3.h系列标签  4.p - 段落标签  5.文本格式化标签(b、u、i、s)  6.标签的属性  7.img标签的使用  8.a标签的使用  9.相对路径的掌握  Html5入门及基础02（表格、表单、css初识）  1.无序列表的掌握  2.了解表格的基本使用  3.input标签的不同type类型  4.color属性的设置方式 ##

## Html5入门及基础01（网页、基础标签、路径） ##

### 1.web的三大结构组成 ###

结构层:html
    样式层:css
    行为层:js

### 2.标签的分类与关系 ###

分类:单标签,双标签
    关系:嵌套关系(保持缩进)/并列关系

### 3.h系列标签 ###

h1-h6
    h1是页面最重要的内容,一般用来存放logo
    	一个页面只能有一个h1

### 4.p - 段落标签 ###

p标签
    	存放文字,独自占据一行

### 5.文本格式化标签(b、u、i、s) ###

加粗
    	b/strong
    下划线
    	u/ins
    斜体
    	i/em
    删除线
    	s/del

### 6.标签的属性 ###

属性写在标签名后面
    多个属性用空格隔开
    <标签名 属性名1="属性值" 属性名2="属性值" ....></标签名>

### 7.img标签的使用 ###

src:图片的路径
    	可以是绝对路径
    	也可以是相对路径
    alt:当图片加载失败的时候,显示的图片描述文本
    title:鼠标悬停的时候,显示的图片描述文字
    width/height:控制图片的宽高,但是建议只控制一边

### 8.a标签的使用 ###

href:目标页面路径
    target:控制页面的跳转方式
    	_self:默认值,不保留原页面
    	_blank:保留原页面
    base标签
    	可以统一控制页面上所有的a标签
    	优点:节省代码
    锚点定位
    	都是利用id的唯一性
    	id:具备唯一性,不能重复

### 9.相对路径的掌握 ###

文件与html在同一级目录
    文件在html的下一级目录
    	先进入这个文件夹,再找到文件
    		文件名/
    文件在html的上一级目录
    	先从文件夹中出来,再找到文件
    		../

## Html5入门及基础02（表格、表单、css初识） ##

### 1.无序列表的掌握 ###

存放没有顺序的数据
    ul中只能有li标签,如果有其他标签最好放在li中
    ul有数量限制,但是li没有限制
    工作中,只要用到列表,那么基本都是无序列表

### 2.了解表格的基本使用 ###

table
    	代表表格
    tr
    	代表表格的行
    td
    	代表行内的单元格
    表格的属性
    	border
    		表格边框
    	cellspacing
    		边框之间的空白间隙
    			默认是2px
    	cellpadding
    		内容到边框的距离
    			一般不用
    	align
    		水平对齐方式
    			left center right
    其他的表格标签
    	th
    		表头数据
    	thead
    		表格的表头结构
    	tbody
    		表格的主体结构
    	caption
    		表格的标题
    			写在table内部
    合并单元格
    	跨行合并
    		rowspan
    			后面不要的数据要删除
    	跨列合并
    		colspan
    			后面不要的数据要删除

### 3.input标签的不同type类型 ###

text
    	文本框
    password
    	密码框
    radio
    	单选框
    checkbox
    	多选框
    button
    	普通按钮
    submit
    	提交按钮
    reset
    	重置按钮
    image
    	图片按钮
    file
    	单文件上传
    name
    	1.给单选框分组,实现单选互斥
    	2.给标签设置分类,用于存储
    placeholder
    	占位符
    checked
    	单选框与多选框用来默认选中
    value
    	1.默认值
    	2.按钮的文字
    maxlength
    	控制最大的字符数
    下拉框
    	select
    	option
    	默认选中
    		selected
    文本域
    	textarea
    		大段文字的输入
    form
    	表单域

### 4.color属性的设置方式 ###

1.英文单词赋值
    	范围比较小
    2.十六进制
    	工作中最常用
    		可以简写
    			#f00:红色
    3.rgb表示法
    	0-255
    		范围跟十六进制一样