html基础

huzijia

2020-06-06

1.什么是HTML?

超文本标记语言:制作网页

2.html的基本结构

1.声明文档
2.html标签
    1.head头部
    2.body体

页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一部分)
footer	标记尾部区域的内容(用于页面或页面中的一部分)
section	web页面中的一块独立的区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

3.html语法结构和规范

1.标签的组成:<开始标签></结束标签>
2.语法规范:标签必须都使用小写,注意属性值必须使用双引号括起来

4.常用的块级标签

1.标题:	h1-h6
2.段落标签:	p
3.列表标签:
    1.无序列表:
        1.ul
        2.li
    2.有序列表
        1.ol
    3.自定义标签
        1.dl
        	2.dt(头部)
        		3.dd
4.表格标签:
    table
    	tr(行)
    		td(th)(列)
5.无意义的块元素: div 一般用于网页的布局 配合css

块级元素的特点:

块级元素会独自占据一行,即使设置了宽度
支持全部的样式
如果没有设置宽度,默认的宽度为父级宽度是100%

5.常用的行级标签(行内元素,内联元素)

不独占一行,盒子并在一行,代码换行,盒子会产生间距
支持部分样式(不支持宽,高.margin上,下)
宽高有内容决定
子元素是内联元素,父元素可以用text-align属性设置元素水平对齐方式,用line-height属性
	设置垂直对齐方式

有语义的行内元素

HTML链接 a标签
```
<a href="链接地址">链接文本</a>
```
target属性,定义被链接的文档在何处显示_blank新窗口打开
HTML图像
```
<img src="图片地址" alt=""
```
文本标签
- b标签:加粗
- strong标签: 具有强调意义的加粗
- i标签:斜体
- em标签:斜体
无语义的实体字符
- span标签: 配合css使用

常用的实体字符

? 百度

视频和音频

video 视频

audio 音频

controls: 控制条

autoplay: 自动播放

iframe 内联框架

<iframe src="path" name = "框架标识名" frameborder = "">

6.内联块元素

支持全部的样式
如果没有设置宽度,宽高由内容决定
盒子并在一行
代码换行,盒子会产生间距
子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式

8.表单标签(form)

表单是一个包含单元素的区域.通过form来定义表单区域

action:数据提交的地址
method:提交方式 get post
- 表单提交默认是以get方式进行数据的传输
- get:
  - 通过url地址传输数据,数据会显示在url地址栏中
  - 传输数据有大小限制,根据游览器的不同数据大小不同
  - 相对来说不安全
- post:
  - 数据不通过url地址传参,相对来说比较安全
  - 数据传输没有大小限制
  - 一般表单指定使用post方式提交数据
enctype:如果表单当中有文件上传必须添加这个属性
- 指定属性值为"multipart/form-data"用于文件转码

通过type属性定义不同类型的表单控件

text 普通文本输入框
password 密码输入框
value 默认初始值
radio 单选按钮
- type="radio" 必须有name属性和value属性,并且一组单选框name属性的值必须相同,默认选中checked
checked 多选按钮
- type="checked" 必须有name属性和value属性,并且一组复选框选框name属性的值必须相同. 默认选中checked

select 下拉框

<p>下拉框:
	<select name = "列表名称">
		<option value="选项的值">中国</option>
		<option value="选项的值">美国</option>
		<option value="选项的值">英国</option>
	</select>
</p>