前端 Study HTML

本文介绍了前端开发中HTML的基本概念,包括五大浏览器的渲染引擎差异、Web标准的构成、HTML语言的结构以及常见标签的使用。强调了遵循Web标准的重要性,以确保不同浏览器下页面的一致性。
摘要由CSDN通过智能技术生成

五大浏览器

  • IE

  • 火狐

  • 谷歌

  • Safari

  • 欧朋(Opera)

渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分

前段的代码是通过什么软件转换成用户眼中的界面的?

通过浏览器转化(解析和渲染)成用户看到的网页

每个浏览器渲染引擎不同,解析的效果会存在差异

保证不同浏览器打开效果一样,就要保证Web标准

web标准

  1. HTML 结构 页面元素和内容

  2. CSS 表现 网页元素的外观和位置等页面样式(颜色,大小等)

  3. JavaScript 行为 网页模型的定义和页面交互

HTML(是一门语言,中文译为超文本标记语言)

页面固定结构,如:

<html>

<head> <title> 页面的标题 </title> </head>

<body> 网页的主题内容

</body>

</html>

  1. html:网页的整体

  2. head:网页的头部

  3. body:网页的身体

  4. title:网页的标题

插件 open in browser :alt+b直接用网页打开

注释

  • 注释的快捷键:ctrl+/ (在VScode中)

标签

  • 双标签,前部分叫开始标签,后标签叫结束标签。之间包裹内容

  • 单标签,自成一体,无法包裹内容

html之间的关系可分为

  1. 父子关系(嵌套关系)(比如html包含head)

  2. 兄弟关系(并列关系)(比如head和body)

  • 标题标签:可分级,只有h1到h6。文字都默认加粗,从1到6逐渐变小。都独占一行。ctrl+d可以选择同样的字

  • 段落标签:<p> </p>

  • 换行标签:<br>

  • 水平分割线:<hr>

  • 文本格式化标签:

    标签 说明
    b,strong 加粗
    u,ins 下划线
    i,em 倾斜
    s,del 删除线

如果要突出强调,就用英文单词

  • 媒体标签:

    1. 图片标签:img<img src="" alt="">(输入img即可)(src=“”标签属性)(src属性名)(引号里面的是属性值),一个标签可以写多个属性,属性之间用空格隔开,标签名与属性名也以空格隔开,属性之间没有顺序之分。

      • alt:替换文本,当src加载失败时,显示的文本。

      • title:提示文本,当鼠标悬停时,显示的文本,title属性不仅仅可以适用图片标签,还可以用于其他标签。

      • width和height:宽度和高度ÿ

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值