HTML入门
HTML入门
勤劳的开发者px 发表于4个月前
HTML入门
  • 发表于 4个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

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控制器

共有 人打赏支持
粉丝 1
博文 51
码字总数 108225
评论 (0)
×
勤劳的开发者px
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: