Web前端之HTML

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

HTML语法规范

    1. <!DOCTYPE html>是一个文档声明 
    2. 根标签 html
    3. html文件主要包含两部分. 头部分和体部分
        头部分 : 主要是用来放置一些页面信息
        体部分 : 主要来放置我们的HTML页面内容
    4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
    5. 标签不区分大小写, 官方建议使用小写

HTML基础

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题(标题可定义为<h1> - <h6> )
<p> 与 </p> 之间的文本被显示为段落
<br/> 换行
<hr />水平线

字体修饰

<b>内容</b> :加粗
<i>内容</i> :斜体
<strong>内容</strong>: 加粗, 带语义标签
<em>内容</em>:斜体, 带语义

图片修饰

<img  src="指定文件路径" width="宽度" height="高度"  alt = "图片加载失败时的提示内容"/>
相对路径: ./ 代表的是当前路径  ../ 代表的上一级路径  ../../ 上上一级路径

列表

无序列表:
    <ul type="选项">
        <li>列表项</li>  
    </ul>

参数type:小圆圈,小圆点, 小方块

有序列表:
    <ol type="选项" start="索引从几开始">
        <li>列表项</li> 
    </ol>

属性type: 1,a ,A,I,

 

链接

<a href="url" target="name">Link text</a>
常用的属性:
​         href  : 指定要跳转去的链接地址  
​               如果是网络地址需要加上http协议 , 
​               如果访问的是本网站的html文件,可以直接写文件路径

​         target: 你可以定义被链接的文档在何处显示
​                _self: 默认打开方式,在当前窗口打开
​                _blank:  新起一个标签页打开页面
                name  :他就会跳到指定名称的页面或者框架

 

表格

<table>
    <tr>--行标签
        <td>row 1, cell 1</td>--列标签
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
常用属性:
   bgcolor : 背景色
   width :     宽度
   height : 高度
   align : 对齐方式
合并单元格
   colspan : 跨列操作
​   rowspan : 跨行操作

注意:在合并单元格时需要删除被合并的单元格。

表单标签

<form   action="直接提交的地址">
        methon="get"    默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
              ="post"   会将参数封装在请求体中, 没有这样的限制
    <input type="text" placeholder="需要给用户的提示,类似于注册页面填写注册名的提示" 
       name="表单提交时,作为参数的名称"  id="以便于在找到他"/>

    <textarea rows="宽度" cols="高度">
        文本域, 可以输入一段文本 ,比如注册时填写爱好
    </textarea>

    <select>--下拉列表
      <option>选择项</option> 
    </select>
     
</form>

type中可输入的类型:
    password :  密码框 
    radio    :  单选按钮 --需要给选项一个相同的name,这样才能单选
    checkbox :  复选框 
    file     : 上传文件 

    submit   : 提交按钮  
    button   : 普通按钮 
    reset    : 重置按钮 
            --name="按钮的名称"
    hidden   : 隐藏域
    date     : 日期类型 
    tel      : 手机号 
    number   : 只允许输入数字

框架

如果使用frameset 需要将body标签取掉
cols : 按列划分页面
rows : 按行划分页面

<frameset rows="50%,50%">

    <frame src="引入的html文件路径"  name="指定框架的名称" />

    <frameset cols="25%,75%">
        <frame src="引入的html文件路径"  name="指定框架的名称" />
        <frame src="引入的html文件路径"  name="指定框架的名称" />
    </frameset>

</frameset>

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值