HTML-编程基础-元素2-03

块状元素与行内元素

#块状元素表示的是该元素使用的时候必须单独占用一行

#行内元素是该元素使用的时候不需要单独占用一行，多个元素使用的时候会在同一行内显示

#常用的块状元素：div、p、hn标签

#常用的行内元素：span、b、i、u标签

分隔线元素<hr>

#分隔线元素是单标签元素

#分隔线元素是空标签元素，块状元素

#作用：在接下来的页面中显示一条单独占用一行的线

#常用属性：size 、width、align、color

路径URL

#同意资源定位器，用来标识网络中所有资源的位置

#绝对路径：绝对路径有是针对与服务器本机的，从盘符开始，又或者子啊网站中从端口开始；

#相对路径：相对路径有两种，一种是针对与当前源代码文件说的，统计目录./父级目录是../；另一种是针对项目的，从项目根目录开始

图像标签<img>

#图片标签是单便签

#是行内元素

#作用是显示图片

#可用于嵌套显示

#必有属性：

Src：引入图片地址

alt：用于在显示不利时替换图片

title：用于解释图片

#常用属性：

width：宽度

height：高度

#常见的图片格式：jog、png、gif、webp（新出的图片样式，尽量使用）

超链接<a>

#超链接是闭合标签

#超链接的作用是指向跳转对应的文件网页

#专属属性：

href：指引跳转的地址

target：跳转链接时使用的方式，常用的有_blank,_self

name：标签的名称

链接的表现形式

下载形式

<a href="a.zip" >点击下载</a>

电子邮件

<a href="mailto:chengtao@tedu.com”>给XX发邮件</a>

描点标签

<a href=”#name”>使用href属性执行目标元素的name属性

列表

列表分类

#有序列表

#无序列表

#自定义列表

#列表的作用：将具有相似特征或者先后顺序的几行文字进行对齐排列

有序列表

#标签：列表标签<ol>子元素标签<li>

#标签属性：块状标签

#属性：type，作用是用来设置列表向的图标的类型

-1      阿拉伯数字排序

-a      以小写字母排序

-A     以大写字母排序

-i       以罗马数字小写排序

-I       以罗马数字大写排序、

start属性：指定开始序号

无无序列表

#标签：列表标签<ul>子元素标签<li>

#标签属性：块状标签

#属性：type，作用是指定列表图标类型

-disc          表示实心圆

-circle       表示空心圆

-square    表示实心矩形

自定义列表

#标签：列表标签<dl>子元素标签<dt>子元素标签<dd>

#标签属性：块状标签

#dt表示的是定义列表中的术语（或者小标题）

#dd是列表项

表格

定义表格

#标签<table>

#标签类型：块状标签

#属性：

Width	表示定义表格的宽度
Height	表示定义表格的高度
Border	表示定义表格的边框
Align	表示定义表格的对齐方式
Bgcolor	表示定义表格的背景颜色
Bordercolor	表示定义表格边框颜色
Cellspacing	表示定义表格的外边距

表格分组

#表格分组一般分为表头、表、表尾

#表头标签：<thead></thead>

#表：<tbody></tbody>

#表尾：<tfoot></tfoot>

注意：

#添加边框使用border属性

#每一行的同一列的宽度都是相同的，以最大的为准

#每一行的所有列的高度都是相同的，以最大的为准

表单

表单定义标签

#标签<form>

#标签类型：块状标签

#属性：method、entype、action

#属性含义：

method表示的是表单提交服务器的方法，常用的方法有get、post、put、delete;常用get与post
entype	表示指定数据提交形式，字符串还是流还是文件。。。。。
action	表单提交的服务器接口地址，url

文本域控件

#标签<textArea>

#标签类型：行内标签

#属性：

Cols	要显示显示文本域区域能显示的列数
Rows	要显示文本域的能显示的行数
Readonly	表示该文本域只读，无法操作
Disabled	禁用该文本域，提交时会忽略它

标签控件

#标签<label>

#标签类型：行内标签

#属性：

For	指向其他属性id，绑定后点击该标签就和点击指定id标签一样

分组标签

#标签<fieldset >

#标签类型：行内标签

#该标签

#属性：

Disabled  禁用
Form  指向表单id，表示属于该表单

子元素分组标题

#标签<Legend >

#标签类型：行内标签

#属性

Align  表示设置水平对齐方式

下拉列表

定义下拉列表标签<select>

#标签<select>

#标签属性：块状标签

#属性

Autofocus:自动获取焦点；
disabled:禁用；form:id,表示属于id的表单；
multiple:bool,为true时表示可选多个选项；
required：默认选项；size:可见下拉菜单个数

下拉列表分组

#标签<Optgroup >

#标签属性：行内标签

#子元素option（选项）label标签

下拉选项

#标签<option>

#标签属性：行内标签

#属性

Value：值；
selected：选中

获取用户输入控件<input>

#标签<input>

#行内标签

#专属属性type

type值	作用
Text	文本，maxlength最大字符数量，placeholder提示字符串
Radio	单选
Checkbox	多选
Submit	提交表单
Reset	重置表单
Date	时间输入
File	文件选择，提交文件时使用
Button	按钮
Email	邮箱
url	地址连接
Number	数字
Tel	电话
Color	颜色
Range	一定数字范围的滑动条，step步进属性
日期选择器	Date\month\week\time\datetime
Search	搜索框

#常见属性

placeholder提示字符

disabled禁止使用

hidden隐藏域，不可见

框架

使用框架，你可以在同一个浏览器窗口中显示不止一个页面

语法：

属性：

width:宽度
height:高度
移除边框：frameborder="0"
Src:表示的是指向的网页地址
Scrolling表示滚动条的设置，scrolling='no'表示不显示滚动体条

使用iframe显示超链接指向的页面：

#定义超链接，指向页面地址，添加属性target的值

#定义框架，设置宽高，设置name属性与需要绑定的超链接target属性值相同

结构标记

<header>	页头
<nav>导航
<section>主体
<footer>页脚
<article>规定独立的自包含内容
<aside>边栏

结构标记的作用是让搜索引擎能更好的注意到，并且提升一点权重，增加曝光率

html5的新属性

autocomplete属性

该属性规定表单是否因该启动自动完成功能，自动完成功能允许浏览器预测对字段的输出，当用户在字段开始键入的时候浏览器基于曾经输入过的值显示可填写的选项；该属性只是用与表单控件

autofocus属性

该属性规定在页面加载的是偶自动获取焦点，适用于所有的表单input控件

form 属性

该属性用于input标签，可以根据该属性将本控件添加到对应的表单中，对应表单中的id

multiple 属性

该属性表示提交文件的时候可以选择多个文件

pattern 属性

该属性表示正在表达式，需要客户许如的数据满足该正则表达式

placeholder 属性

表示的是一种提示属性

required属性

表示该控件必须填写