文档章节

HTML入门

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 12:18
字数 1227
阅读 5
收藏 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
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员

暂无文章

js 操作cookie

var cookie = {// 设置cookie方法 set:function(key,val,time){ // 获取当前时间 var date = new Date(); // 将date设置为n天以后的时间 var exp...

小丶二
5分钟前
0
0
限制root远程登录 su和sudo命令

9月21日任务 3.7 su命令 3.8 sudo命令 3.9 限制root远程登录 对于Linux而言,权限的重要性毋庸置疑!对于普通用户而言无法执行那些只有root用户才能有效的命令,导致工作无法有效进行; 系统...

robertt15
7分钟前
0
0
MQTT协议的初浅认识之通讯级别和持久会话

背景 这是我最近了解MQTT协议的最后一部分内容了,MQTT协议里面的QOS和Keep Alive是两个比较重要的内容。QOS的设置,直接影响了订阅客户端与中间件之间的消息交互行为。而Keep Alive直接影响...

亚林瓜子
9分钟前
0
0
calc

width: calc(100% - 30px); 特别注意:减号左右空格,均不能去掉。 width: calc(100% - 30px);

柴高八斗之父
17分钟前
0
0
Spring Cloud Gateway全局过滤器GlobalFilter:返回消息和重定向

Spring Cloud Gateway的全局过滤器GlobalFilter,顾名思义,声明后会对所有的请求生效,可以用来做权限控制,这里简单记录一下拦截到非法请求后如何返回自定义信息和将请求重定向到指定URL。...

夜雨寄北09
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部