Web前端day01-html简介

目录

1.什么是网页

2.网页的特点

3.HTML

4.Web标准

5.文档声明(doctype)

6.实体表签

7.meta标签

8.语义标签

9.块元素与行内元素

10.浏览器解析网页时会自动对不规范的内容进行修正

11.布局标签(结构化标签)


1.什么是网页

网站是多个网页集合
网页构成网站基本元素 通常由图片 链接 文字 音频 视频等元素组成的

2.网页的特点

  • 不需要安装
  • 不需要更新
  • 跨平台

网页中用到的语言:html css javascript

3.HTML

HTML指超文本标记语言 用来描述网页的一种语言 不是编程语言而是一种标记语言
标记语言是一套标记标签

常用浏览器:火狐 谷歌 IE Safari和Opera

4.Web标准

web标准由HTML CSS JS组成

web标准保证不同浏览器也能呈现一样的效果

所有的数据在计算机中都是以二进制进行存储

编码 将字符转换为二进制码的过程成为编码
解码 将二进制码转换为字符的过程成为解码
字符集 编码和解码所采用的规则称为字符集
乱码问题 如果编码和解码所采用的字符集不同就会出现乱码问题
常见的字符集有 ASCII UTF-8等

5.文档声明(doctype)

文档声明用来告诉浏览器当前网页的版本

<!doctype html>
<!--表示当前使用的时html5-->

6.实体表签

在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格

在HTML中 不能直接书写一些特殊符号 比如多个连续的空格,字母两侧的大于号和小于号

如果需要在网页中书写特殊符号 则需要使用HTML中的实体(转义字符)

实体的语法:

&实体的名字;

&nbsp;

&gt;大于号

&lt;小于

&copy;版权符号

7.meta标签

meta主要设置网页中的一些元数据 元数据不是给用户看的

<meta charset="UTF-8">
    <!--
        charset指定网页是字符集
        name指定数据的名称
        content指定数据的内容
            keywords表示网站的关键字 可以同时指定多个关键字 关键字使用,隔开
    -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com"><!--3s之后跳转-->

8.语义标签

使用html标签时 应该关注的是标签的语义 而不是样式

在页面中独占一行的元素称为块元素(block element)

 在页面中不会独占一行的元素称为行内元素(inline element)

        标题标签:

        h1~h6一共有6级标题 从h1~h6重要性递减

        h1在网页中的重要性仅次于title 一般情况下一个页面只有一个

        标题标签都是块元素 

<em>标签表示语音语调的一个加重  行内元素

<strong>标签表示强调重要内容   行内元素

<blockquote>表示一个长引用 块元素 独占一行

<q> 表示一个短引用 行内元素

<br>标签表示页面中换行 

9.块元素与行内元素

块元素(block element)

            -在网页中一般通过元素来对页面进行布局

行内元素(inline element)

            -行内元素主要用来包裹文字

            -一般情况下会在块元素中放行内元素,不会在行内元素中方块元素

            -块元素中基本上什么都能放

            -p元素中不能放任何块元素

10.浏览器解析网页时会自动对不规范的内容进行修正

比如:

  • 标签写在了根元素外部
  • p元素中嵌套块元素
  • 根元素中出现了除head和body以外的子元素等

11.布局标签(结构化标签)

header表示网页的头部 网站的顶部

main表示网页的主体部分(一个页面中只会有一个main)

footer 表示网页的底部

nav表示网页中的导航

aside表示和主题相关的其他内容(侧边栏)

article表示一个独立的文章

section表示一个独立的区块 上边的标签都不能表示时使用section

div没有语义 就用来表示一个区块 目前来讲div还是主要的布局元素

span行内元素 没有任何的语义 一般用于在网页中选中文字

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值