文档章节

HTML入门

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 12:18
字数 1227
阅读 5
收藏 0
点赞 0
评论 0

1.什么是html

  • 超文本标记语言

  • 超文本:功能比文本强大

  • 标记语言:语法由标签组成、

2.html可以做什么

  • 设计页面,做网页

3.html语法规范

  • 扩展名是html或者htm

  • html标签不区分大小写

  • html由头(head)和体(body)组成

  • 标签是可以嵌套的,标签里面可以放标签

  • 标签一般由起始标签开始,结束标签终止。但是如果标签不修饰内容,可以在标签里结束。

4.标签属性

  • 属性是属于标签的,修饰标签,让标签有更多的效果

  • 属性一般定义在起始标签里面。

  • 属性一般以 属性=属性值的形式存在

  • 属性值一般用 ‘’或者“ ”括起来。 不加引号也是可以的.(不建议使用)

  • 字体标签以font定义

color:字体颜色

size:字体大小,取值1~7

face:字体类型

  • <font color="red" size="3" face="微软雅黑">hello world!!!</font>
    <font color="red" size="1">hello world!!!</font>
    <font color="red" size="7">hello world!!!</font>
  • 排版标签

  1. 标题标签:   <hn>标题<hn> n取值1~6
  2. 段落标签:   <p>段落</p>
  3. 粗体标签:   <b>内容</b>
  4. 斜体标签:   <i>内容</i>
  5. 下划线标签:   <hr/>
  6. 换行标签:  <br/>

 

  • 图片标签

  • 以img定义

  • 属性:
  1. src:图片路径
  2. width:宽
  3. height:高
  4. alt:图片描述
  • 路径问题:
  1. 以/开头的是绝对路径。
  2. 不以/开头的是相对路径,../指的是上级目录
  • 列表标签

  • 有序列表
  1. 以ol来定义
  2. li列表的条目
  3. 属性:
  4. start:起始的索引
  5. type:类型;
  • 无序列表
  1. 通过ul来定义
  2. li列表的条目
  3. 属性:
  4. type:类型
  5. 注意:
  6. li要定义在ol或者ul里面
  • 超链接标签

  • <a href="../列表标签/01.html" target="_self">列表</a>
  • 以a来定义
  • 属性:
  1. href:链接地址, #当前页面(把自己刷新了一遍)
  2. target:打开方式 _blank:新起页面; _self:当前页面(默认)
  • 表格标签

  1. 以table定义
  2. tr行,tr定义在table里面
  3. td列(单元格), td定义在tr里面
  • table属性:
  1. border:边框; 1px
  2. bgcolor:背景色
  3. background:背景图片
  • td属性:
  1. rowspan:行合并
  2. colspan:列合并
  • 单元格合并步骤
  1. 删除要合并的单元格,只留一个(最前端)
  2. 设置colspan或者rowspan属性,合并几个,值就是几
  • 框架标签

  • frameset:框架集
  • 属性:
  1. cols:列所占的百分比,按照列来分割
  2. rows:行所占的百分比,按照行来分割
  • frame
  1. 属性
  2. src:指定页面的路径
  3. 注意:不能和body一起使用
  • 表单标签

  • 通过form来定义

  • <form action="http://www.baidu.com" method="post">
  • ...
  • </form>
  • 常用属性
  1. ​ action:提交路径,默认是当前页面
  2. ​ method:提交方式,常用的是get和post. 默认就是get

     get和post区别

  1. get请求参数跟在请求地址(地址栏可以看见)后面,post是不在请求路径后面(请求体)里面
  2. get请求相对不安全,post相当安全一些
  3. get请求对参数大小有限制,post请求参数大小没有限制 
  • form的常见子标签
  1. ​ input:输入域, 通过type属性来指定类型

    ​ select :选择菜单

    ​ textarea:文本域

    1.input:输入类型

    <input type="xxx"/>

    type属性,类型是由属性(type)定义的。

  2. text:文本输入框

  3. password:密码域

  4. submit:提交按钮

  5. reset:重置按钮

  6. button:空白按钮

  7. radio:单选框

  8. checkbox:复选框

  9. hidden:隐藏字段

  10. file:文件

  11. image :图片按钮

  12. select :选择菜单

    <select name="">
    <option value="">显示的内容</option>
    </select>
  13. option:选择菜单的选项

  • 注意:

  1. name在select里面指定
  2. value在option里面指定
  3. option定义在select里面
  • extarea:文本域

    <textarea rows="20" cols="30" name="introduce"></textarea>

    属性:

  1. cols列
  2. rows:行

     通用属性

  • name
  1. 作为单选和复选框的分组
  2. 作为key上传到后台程序,后台程序通过key得到相对应的value。如果要想把数据提交到后台程序,一定要指定name属性
  • value
  1. 给按钮起名字
  2. 设置提交到服务器的值 name=value
  • input type属性取值

    <input type="xxx"/>
  1. date:日期
  2. number:输入只能是数字
  3. email:校验email格式
  4. placeholder:用户提示

5.其他: 

  • color属性取值有三种

  1. 英文
  2. rgb(100,100,100)
  3. 16进制 eg: #ffffff
  • 图片链接

  • 在超链接标签里面嵌套一个图片标签

    <a href="http://www.itheima.com"><img src="../img/logo2.png"/></a>
  • 回到顶部

  • <a id="aId"></a>
  • <img src="../img/1.jpg" width="100%" height="800px" />
  • <br />
  • <br />
  • <p>文字</p>
  •           。。。。。
  • <p>文字</p>
  • <!--文本,回到顶部-->
  • <a href="#aId">回到顶部</a>
  • html5里面的新标签

       1)input type属性取值

  • date:日期

  • number:输入只能是数字

  • email:校验email格式

  • placeholder:用户提示

        2)audio标签

  • <audio src="../audio/The lol.mp3" controls="controls"></audio>

       属性:

  • src:歌曲路径

  • controls控制器

       3)video标签

  • <video src="../audio/a.mp4" controls="controls"></video>

       属性:

  • src:视频路径

  • controls控制器

© 著作权归作者所有

共有 人打赏支持
勤劳的开发者px
粉丝 2
博文 51
码字总数 108225
作品 0
荆州
程序员

暂无相关文章

MySQL主从复制原理、半同步操作步骤及原理

1.1 企业Linux运维场景数据同步方案 1.1.1 文件级别的异机同步方案 1、scp/sftp/nc 命令可以实现远程数据同步。 2、搭建ftp/http/svn/nfs 服务器,然后在客户端上也可以把数据同步到服务器。...

xiaomin0322 ⋅ 15分钟前 ⋅ 0

Oracle10g 数据及文件迁移过程[原]

QL*Plus: Release 10.2.0.1.0 - Production on 星期三 5月 11 10:22:35 2011 Copyright (c) 1982, 2005, Oracle. All rights reserved. 连接到: Oracle Database 10g Enterprise Edition Re......

harrypotter ⋅ 21分钟前 ⋅ 0

nginx安装

1:安装工具包 wget、vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc gcc-c++ 2:下载nginx安装包 wget http://nginx.org/download/nginx-1......

壹丶贰 ⋅ 24分钟前 ⋅ 0

ideaVim安装及配置

1.安装插件 File-Settings-Plugins,Browse Repositories,输入ideavim,安装。 重启后,在Tools-Vim Emulator启用。 2.快捷键设置 ideaViim键与idea快捷键有冲突,可以在Settings-Other Se...

Funcy1122 ⋅ 28分钟前 ⋅ 0

MySQL中B+Tree索引原理

B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引。B+树中的B代表平衡(balance),而不是二叉(binary),因为B+树是从最早的平衡二叉树演化而来的。在讲B...

浮躁的码农 ⋅ 43分钟前 ⋅ 0

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 47分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 57分钟前 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 今天 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 今天 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部