html 学习第三天

2019-10-17  本文已影响0人  罗_c857

HTML区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<div style="color:#0000FF"> 

 <h3>这是一个在 div 元素中的标题。</h3> 

 <p>这是一个在 div 元素中的文本。</p>

</div>

HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

<p>他的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

HTML 分组标签

<div>                定义了文档的区域,块级 (block-level)

<span>            用来组合文档中的行内元素, 内联元素(inline)

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>

.

input 元素

.

</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

HTML 表单标签

New: HTML5新标签

<form>                                    定义供用户输入的表单

<input>                                    定义输入域

<textarea>                                定义文本域 (一个多行的输入控件)

<label>                                    定义了 <input> 元素的标签,一般为输入标题

<fieldset>                                定义了一组相关的表单元素,并使用外框包含起来

<legend>                                定义了 <fieldset> 元素的标题

<select>                                    定义了下拉选项列表

<optgroup>                                定义选项组

<option>                                    定义下拉列表中的选项

<button>                                    定义一个点击按钮

<datalist>New                            指定一个预先定义的输入控件选项列表

<keygen>New                            定义了表单的密钥对生成器字段

<output>New                                定义一个计算结果

HTML 脚本

HTML <script> 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。

<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!":

<script>

document.write("Hello World!");

</script>

JavaScript实例代码:

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我!</button>

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

上一篇 下一篇

猜你喜欢

热点阅读