块元素和行内元素

一、定义和用法

div 标签定义 HTML 文档中的分割或部分（分区或小节，division/section）。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
任何类型的内容都可以放在 div 标签内！div 标签可用作 HTML 元素的容器，然后使用 CSS 设置样式或使用 JavaScript 进行操作。
如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。通过使用 class 或 id 属性，可以轻松地对 div 标签设置样式。
注意：默认情况下，浏览器总是在 div 元素前后放置一个换行符。

二、用法

div 是块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。
不必为每一个 div 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 div 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

实例：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}	
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

</body>
</html>

表单

1 2	<input type="text"> <!--输入框--> <button>SEARCH<button> <!--搜索-->

表单常用属性

1.作用于form标签（表单）
action:用于指定表单的提交地址（需要与后端沟通后确定）。
target:用于控制表单提交后，如何打开页面，常用值如下：
        _self:在本窗口打开。
        _blank:在新窗口打开。
2.作用于input标签（输入框）
method:用于控制表单的提交方式。
type:设置输入框的类型，目前用到的值是text,表示普通文本。
name:用于指定提交数据的名字，（需要与后端人员沟通后确定）。

示例

<form action="https://search.jd.com/Search"target="_blank">
        <input type="text"name="keyword">
        <button>京东搜索</button>
        <hr>
    </form>

表单_常用控件

1 2	认识新属性：value(值):可以控制输入框的默认值 maxlength(最大长度)：可以输入最大的字符长度

表单_单选框与多选框

单选框

1 2	<input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="male">男

常用属性性如下：
name:数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致。
value：提交的数据值
checked:让该单选按钮默认选中。

复选框

1
2
3

<input type="checkbox" name="hobby" value="exercise">运动
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="swimming">游泳

常用属性性如下：
checked：让该复选框默认选中。

表单_隐藏域

隐藏域

1	<input type="hidden" name="page" value="1">

用户不可见的一个区域，作用是：提交表单的时候，携带一些固定的数据。

提交按钮

1 2	<input type="submit" value="提交"> <hatton>提交</hatton>

注意：
1.button标签type属性的默认值是submit。
2.button不要指定name属性。
3.input标签编写的按钮，使用value属性指定按钮文字。

重置按钮

1 2	<input type="reset" value="重置"> <button type="reset">重置</button>

普通按钮

1 2	<input type="button" value="确定"> <button type="button">确定</button>

注意：
普通按钮的type值为button,若不写type值是submit会引起表单的提交。

表单_文本域和下拉框

文本域

1	<txtarea name="msg" rows="22" cols="3">文本域</txtarea>

常用属性如下：
1.rows：指定默认显示的行数，会影响文本域的高度。
2.cols:指定默认显示的列数，会影响文本域的宽度。
3.不能编写type属性，其他属性，与普通文本输入框一致。

下拉框

<select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen" selected>深圳</option>
        </select>

常用属性及注意事项：
1.name:指定数据的名称。
2.option标签设置value属性，如果没有value属性，提交的数据是option中间的文字;如果设置了value属性，提交的数据就是value的值（建议设置value属性）
3.option标签设置了selected属性，表示默认选中。

表单_禁用表单控件

禁用表单控件

给表单控件的标签设置disabled即可禁用表单控件。
input、textarea、button、select、option都可以设置disabled属性

表单_label标签

表单label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与label关联方式如下：
1.让label标签的form属性的值等于表单控件的id。
2.把表单控件套在label标签的里面。

框架标签

1	<iframe src="https://www.taobao.com"frameborder="0"width="300"height="300">taobao</iframe>

与超链接的target属性配合使用

1
2
3

<a href="https://www.taobao.com"  target="clj">淘宝</a>
    <br>
    <iframe name="clj"  frameborder="0" width="300" htight="300" >taobao</iframe>

与表单的target属性配合使用

<form action="https://www.taobao.com" target="clj">
    <input type="text" name="keyword">
    <button>搜索</button>
    </form>
    <iframe name="clj"  frameborder="0" width="300" htight="300" >taobao</iframe>

标签名	功能和语义	属性	单/双标签
iframe	框架（在页面中嵌入其他文件）	name:框架名字，可以与target属性配合。 width:框架的宽。 height：框架的高。 frameborder:是否显示边框，值：0或者1。	双

iframe标签的实际应用：
1.在网页中嵌入广告。
2.与超链接或表单的target配合，展示不同的内容。

HTML 字符实体

字符实体由三部分组成：一个&和一个实体名称（或者一个#和一个实体编号），最后加上一个分号; 。