html基础

huzijia 2020-06-06

1.什么是HTML?

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

2.html的基本结构

1.声明文档
2.html标签
    1.head头部
    2.body体
页面结构分析
元素名描述
header标题头部区域的内容(用于页面或页面中的一部分)
footer标记尾部区域的内容(用于页面或页面中的一部分)
sectionweb页面中的一块独立的区域
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>
  • file 文件上传选框 文件上传 type="file" 一般用于文件上传

  • textarea 文本域 也需要name属性

  • button普通按钮

  • image 图片按钮

  • submit 提交按钮

  • reset 重置按钮

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

  • disable 禁用

  • readonly只读

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

  • search 搜索框

初级的表单验证:
  • 提示信息:placeholder
  • 不能为空:required
  • 正则表达式:pattern

9.边距

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

相关推荐

末点 / 0评论 2020-06-27