文档章节

HTML

Romanceling
 Romanceling
发布于 2016/05/05 18:49
字数 1266
阅读 28
收藏 0

Web三要素;html的文本元素;元素文本的样式;图像和超链接以及锚点;表格;表单;

---------------------------------------------------------------------------------------------------------------------

Web三要素:
    - 浏览器
    - 服务器(网页html存在服务器中)
    - http协议
--------------------------------------------------------------------------------------
<!-- 版本声明 -->
<!doctype_html>
<!-- 唯一的根 -->
<html>
<!-- 对网页做一些基本的声明 -->
<head>
<!-- 声明网页内容的编码 -->
<meta charset="utf-8">
<!-- 声明网页的标题 -->
<title>第一个网页</title>
</head>
<!-- 写网页的内容 -->
<body>
    朗哥哥真帅!
</body>
</html>
----------------------------------------------------------------------------------------
html的文本元素:
    1.标题元素:<h1>一级标题</h1>
    2.段落元素:<p>段落</p>
    3.列表元素:
        - 有序列表:<ol>
                <li>有序列表</li>
                </ol>
        - 无序列表:<ul>
                <li>无序列表</li>
                </ul>
        - 列表的嵌套:
        <ol>
            <li>
                安徽省
                <ul>
                    <li>亳州市</li>
                    <li>安庆市</li>
                    <li>合肥市</li>
                </ul>
            </li>                
            <li>
                江苏省
                <ul>
                    <li>无锡</li>
                    <li>南京</li>
                    <li>苏州</li>
                </ul>
            </li>
            <li>
                浙江省
                <ul>
                    <li>杭州</li>
                    <li>宁波</li>
                    <li>温州</li>
                </ul>
            </li>
        </ol>

    4.分区元素:
        - 行内分区元素:<span style="color:red;">行内分区元素</span>
        - 块分区元素:<div>块分区元素</div>
-------------------------------------------------------------------------------------------
元素文本的样式:
一.行内元素:
1.<i>定义斜体字。 2.<em>定义着重文字。
3.<b>定义粗体文字。 4.<strong>定义加重文字。
5.<u>定义带下划线文字。  6.<del>定义带删除线的文字。

  - 换行 <br>   - 空格 &nbsp   - 小于号 &it
------------------------------------------------------------------------------------------
图像和超链接以及锚点:
- 图像(常用相对路径):<img src="../images/1.png"/>

- 超链接:<a href="http://www.xxx.com" target="_blank">链接名</a>
    target设置为blank时打开链接时会用新的标签页。 此外海可以设置为_self。

- 锚点的定义:<a name="a1">被设为锚点的文本等</a>
  锚点的引用:<a href="a1">回到锚点</a>
------------------------------------------------------------------------------------------
表格:
1.定义表格:<table></table>
2.创建行:<tr></tr>
3.创建列:<td></td>
例:
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
    </table>

4.表格的常用属性:
 - <table>元素:border、width/height、align
    cellpadding:单元格边框与内容之间的间距
    cellspacing:单元格之间的间距

 - <tr>元素:align/valign

 - <td>元素:align/valign、width/height
    colspan:跨行
    rowspan:跨列

 - 行分组:便于给每一组设置统一的样式
    表头:<thead></thead>
    表主题:<tbody></tbody>
    表尾:<tfoot></tfoot>
-------------------------------------------------------------------------------------------
表单:用于显示、收集信息,并提交信息到服务器

- 表单二要素:
一.form元素:<form>要收集提交的数据</form>
    表单元素的主要属性:
     1.action:表单数据提交的url
     2.method:表单数据提交的方式
     3.enctype:表单数据编码的方式

二.表单控件:
 1.input元素:
    - 文本框:<input type="text"/>
    - 密码框:<input type="password"/>
    文本框和密码框的常用属性:
        value:给框设置默认值;
        maxlength:限定输入的最大长度;
        readonly:只读;
 
    - 单选框:<input type="radio"/>
    - 复选框(多选框):<input type="checkbox"/>
     单选框和复选框的常用属性:
        value:文本,当提交form时,如果选中了此按钮,那么value就被发送到服务器。
        name:用于分组,同一组单的单选框或复选框的名称必须相同。
             对于单选框:同名的框是一组,彼此互斥(只能选其中一个)。
        checked:设置此框被默认选中

    - 提交按钮:提交表单数据 <input type="submit"/>
    - 重置按钮:将表单数据重置为初始值 <input type="reset"/>
    - 普通按钮:没有默认功能,需要通过js自定义功能。通常用于执行客户端脚本。
            <input type="button"/>
    按钮的主要属性:value:按钮的名字。

    - 隐藏域:传递不希望被用户看见数据。需要提前通过value设置好默认值。
          <input type="hidden"/>
    - 文件选择框:用于上传文件  <input type="file"/>
    
 2.其他元素:
    - 标签label:用来管理表单中的文本。可以将某文本和某控件绑定在一起,
         使得用户点击该文本时就相当于点击了那个控件。
       绑定步骤:
         - 给目标控件加上id
         - 给文本加上label,并设置for="id值"
    例:     <p>
             <input type="checkbox" id="c1"/>
             <label for="c1">我已阅读并自愿遵守此协议。</label>
         </p>
    - 文本域textarea:相当于多行文本框
        rows:设置占据多少行文本的高度。cols:设置占据多少列文本的宽度。
        双标签中间的内容就是它的默认值。 readonly:只读。
    例:     <p>
             简介:
             <textarea rows="6" cols="20">请介绍下自己!</textarea>
         </p>
    - 下拉选:value、selected
        <p>
             城市:
             <select>
                 <option>请选择</option>
                 <option>合肥</option>
                 <option selected>亳州</option>
                 <option>安庆</option>
                 <option>阜阳</option>
             </select>
        </p>

<!-- 任何表单控件都有两种状态:可用(enabled)、不可用(disabled)。默认为可用。
         readonly:只读,但框中数据可以提交给服务器。
         disabled:不可用,框中数据无法提交给服务器。
 -->
例    <div>
        账号:<input type="text" enabled/>
    </div>
    <div>
        密码:<input type="password" disabled/>
    </div>

© 著作权归作者所有

上一篇: CSS
Romanceling
粉丝 14
博文 166
码字总数 91809
作品 0
无锡
程序员
私信 提问

暂无文章

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
546
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
31
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
17
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
51
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
58
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部