三大元素块级元素、内联元素以及块级内联元素

内容大纲

      三大元素块级元素、内联元素以及块级内联元素的具体作用，和其中的一些标签的用处、语法和属性，通过style可以改变大部分标签的属性，学会通过img在网页中插入图片并能更改大小，利用input标签中的type属性来改变输入框的种类，实现较为简单的表单设计，还能使用span标签将一些特殊字符输入并能在网页中展现出来。有序、无序、自定义列表的不同点和具体使用方法，显示出来的样式不同，且可通过list-style-image：URL（路径）来更改列表符号为图片。

二 笔记

块级元素

div元素可以将文档分隔为不同的、独立的部分，是一个容器

p是一个段落标签，一般作为文字标签，p标签不能包裹块级元素，但是可以包裹行内标签，p标签相对于div具有上下边距

h1-h6为标题标签；谷歌浏览器默认大小为16px；h4四级标题大小为1em，相当于16px;em越大单位越大，1em=16px,2em=32px。如果设置了初始大小，那么1em等于初始大小。

列表标签（最少由两个标签组成 ol-li ul-li dl-dt-dd）

有序：有序列表是一列用数字标记的项目（数字、字母、罗马数字）默认使用数字来标记，根据type来更改字母、罗马数字标记；字母：大写A大写标记，小写a小写标记；罗马数字标记：大写I大写标记，小写i小写标记；排列顺序：start 书写多少就从多少排起

无序：默认使用粗体圆点标记，可以使用type来改变标记样式（空心圆 circle 正方形 square 实心圆 disc）

自定义：自定义列表中每个元素标题用dt定义，元素内容用dd定义

每一个列表都具有内外间距样式

---

创建一条水平线（空标签）

内联元素

1. a标签：

从一张页面链接到另一张页面，href表示链接目标

语法： href必须写

在起始标签内部为属性，注意空格；在起始标签与结束标签之间为内容。

一般a标签具有三个属性：

• href属性一般为网址或文件相对路径；
• target属性一般表示打开新页面的方式（_blank 在新窗口打开 不可以返回上一个页面  _parent 在父级框架打开 _self 默认值 在相同窗口打开 可以返回上一个页面  _top在整个窗口中打开）
• title属性为此超链接的分类标题
• 锚点：一般用于返回顶层或者到达底层
• #为ID，表示唯一性；. 为class表示可复用（为元素取名）

1. span标签：

没有特殊的含义，与div类似，区别在于div是块级元素，span是内联元素，是一个自适应标签。用处是处理一个大块内容里面的小块内容。

1. 斜体

i标签 因为i标签使用率很低，所以通常用作图标标签

em标签

1. 加粗

b标签;strong标签

1. 其余标签

上标 sup；下标 sub；商标 code；格式 pre

pre标签可以完美的保留内容中的空格、转行各种格式

1. 标签内部的空格不管多少个，编译之后在浏览器上只有一个空格，如需添加空格，使用 标签

内联块状元素

1. img

向网页中嵌入一幅图像 注意：从技术上讲，标签并不会在网页中插入图像，而是从网页上链接图像。标签创建的是被引用图像的占位空间。

语法：单标签

src属性：规定显示图像的URL路径来源

alt属性：规定图像的替代文本

具有height、width属性

图片的格式：GIF、JPG/JPEG、PNG

GIF特点：最多支持256色，支持透明效果，支持多帧动画显示效果（可以使用在品质较差或者需要透明或动画显示的情况）

JPG/JPEG特点：支持多种颜色，可以有很高的压缩比，使用了有损压缩，不支持透明，不支持动画效果（可以使用在品质要求较高的场合：风景、写真等）

PNG特点：是一种新的图片技术，可以表现品质比较高的图片，使用了无损压缩，支持透明，不支持动画效果（w3c推荐的）

1. input标签

用于收集用户信息，根据不同type属性

• • text 定义单行输入字段，用户可在其中输入文本
  • password 定义密码字段，该字段中字符被掩码
  • radio 定义单选按钮
  • checkbox 定义复选框
  • hidden 定义隐藏的输入字段
  • button 定义功能按钮

input宽度要写在style内

单选框radio需要取相同的名字 注意：多选框与单选框可以是多个，每一个为一个input。

button 普通按钮；reset 重置；submit 提交；file 文件选择

注意：文本框、密码框、按钮才具有value属性；多选框、单选框具有默认值 checked

密码框提示为小黑点，可用placeholder设置可见提示。