前端学习--Html5

  • 超文本标记语言,不是一种编程语言,而是一种标记语言。
  • Html使用标记标签来描述网页,Html文档包含了HTML标签及文本内容。
  • Html文档也叫web页面。
  • 后缀名:.html  .htm  两种后缀名没有区别。
  • Html标签成对出现,例:开始标签<b>,结束标签</b>,html标签又叫html元素。空元素在开始标签中进行关闭 ,如<br/>;所有元素都必须关闭。
  • web浏览器用于提取HTML文件,用作网页显示,但不是直接显示html标签。
    <!DOCTYPE html>    //声明为html页面,不区分大小写
    <html>        //根元素
        <head>
            <meta charset = "UTF-8"/>   //声明中文,用UTF-8或GBK
            <title>页面标题</title>
        </head>    //头部元素
        <body>
            <h1>标题</h1>  
            <p>段落</p>
    
        </body>    //只有body区域在浏览器中显示
    
    </html>

    <meta>标签属性:name (描述网页)、http-equiv、charset(转中文)

  • 编辑器:vscode、sublime  
  • 网页按F12可查看组成标签
  • html标签对大小写不敏感
  • 可以在开始标签中添加属性,属性以键值对的形式出现,属性值带引号。class 类名 (classname 类名从样式文件引入);id 定义元素唯一id;style规定行内样式;title描述了元素的额外信息;
  • 超链接  <a>
    <a herf="https://www.baidu.com">这是一个链接</a>

         未设置样式默认一个未访问过的连接显示蓝色字体带下划线;访问过的链接显示紫色并带有下划线;点击链接时,链接显示为红色并带有下划线。    

        target属性可定义被链接的文档在何处显示,如果将target属性设置为quot、_blank,链接将在新窗口打开

  • 图像  <img>

<img loading="lazy" src="/images/logo.png" alt="图片无法显示" width="258" height="39">

注:<img>是空标签,只包含属性,且没有闭合标签。

alt属性为图像定义一串预备可替换的文本。

src和href的区别:1、用途不同,src用于嵌入到文档中的资源,href用于链接到文档之外的资源;2、引用方式不同,src引用的资源是必需的,href引用的资源是可选的;3、对文档的影响不同,src会直接影响文档的加载和显示,href只会影响到引用的资源的使用;4、适用范围不同,src适用于图片、音频、视频和脚本等资源的引用,href适用于CSS样式表、字体文件和网页链接。

  • <br/> 换行  ; <hr/>水平线
  • <strong>加粗、<small>缩小、<sub>下标、<code>计算机输出、<kbd>键盘输入
  • <address>  定义文档作者或拥有者的联系信息
  • <bdo>倒序显示
  • 头部<head>元素:

                <title>:文档标题

                <base>:指定页面链接标签的默认链接地址

                <link>:文档和外部资源的关系,通常用于连接到样式表

                <meta>:元数据

                <script>:客户端脚本文件

                <style>:html文档样式。

内联样式:在html元素中使用style;

内部样式表:在html头部<head>中使用<style>元素

外部引用:使用外部css文件 (推荐)

  • html表格

<tr>行、<td>单元格、<th>表头

无序列表 <ul>、有序列表<ol>

  • html区块

<div> 前后会换行,可用于文档布局,块级

<span> 行内元素

  • html表单  <form>

输入元素<input>

        属性 type :text、password、ratio(单选按钮)、checkboxes(复选框)、submit(提交按钮)

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值