html基础

1.什么是HTML?

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

2.html的基本结构

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

页面结构分析

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>

• file 文件上传选框 文件上传 type="file" 一般用于文件上传

• textarea 文本域 也需要name属性

• button普通按钮

• image 图片按钮

• submit 提交按钮

• reset 重置按钮

• hidden 隐藏域,要和表单单一其提交的信息

• disable 禁用

• readonly只读

• range 滑块 step属性:每次增2

• search 搜索框

初级的表单验证:

• 提示信息:placeholder
• 不能为空:required
• 正则表达式:pattern

9.边距

• 内边距:元素内容和元素边框之间的距离 padding
• 外边距:元素距离周围元素之间的距离 margin auto水平居中