html基础-2-文档类型、字符编码和标签属性

文档类型

由于html在更新迭代,例如HTML4,HTML5等,因此我们在写网页的时候需要指定文档类型用来告诉浏览器你是用的哪个版本的语法,便于浏览器正确解析源码

  • 指定文档类型为html5:<!doctype html><!Doctype HTML>均可
  • 文档类型应该放在<html>之前

字符编码

计算机在底层是以0101的方式存储数据,所以善于数值运算,但是对于字符串却犯难了,计算机需要首先按照不同的标准将不同的字符编码,然后再解码才能被计算机正确识别,常用的字符集包括:utf-8, gb2312
在编写网页的时候,严谨的来说,我们需要指定编码字符集,方法是在headmeta中指定:

  • 指定网页字符编码:<meta charset="utf-8">
  • 指定标签属性:<h1>content<font color="red" size=10>属性</font>

特殊字符(实体)

html默认将多个空格当作单个空格,另外一些特殊符号本身属于语法结构,若想显示多个空格之类的特殊符号则需要用到转义:&名称;
&nbsp;:空格
&gt;:>
&lt;:<
&copy;:版权符号
更多特殊字符参见w3cschool

meta标签

meta标签主要用于设置网页的元数据,不是显示在网页给用户看的,而是给搜索引擎或者爬虫看的,多个meta分行书写,常用属性包括:charset、name、content
示例:
<meta name="keywords" content="HTML,CSS,前端">
<meta name="description" content="网页描述信息">
keywords:当用户在搜索引擎键入搜索词的时候,返回的页面则是根据meta中关键词而来,例如在google搜索购物,会返回包含亚马逊的结果,查看亚马逊的源码发现,其meta的keywords包含"网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon"
description:用于指定网站的描述,显示在搜索结果的简介摘要中
content:对应类别具体的内容,多个描述以,隔开
在这里插入图片描述

标签属性

通过meta的学习,我们其实设置了标签的属性,总结说要想设置标签的属性需要:

  • 开始标签自结束标签中为标签中的包裹的内容设置属性,例如字体大小、颜色等
  • 设置方式是通过键=值,多个属性用空格隔开,值通过'"包裹起来,例如<font color='red' size='6'>nothing is impossible</font>,将字体颜色设为红色
  • 属性名和属性值需要依据文档规范,某些属性没有值,直接写属性名
<!--指定网页版本-->
<!doctype html>
<html>
<!--
	<p>...</p>成对标签
	<img>或<img> </img>单标签
	<input>或</input>单标签
	在标签中可以设置属性,为键值对的格式,属性之间以空格分开
	<h1>
   	 <font color="red" size=6>nothing impossible</font>
	</h1>

-->
    <head> 
    	<!--head标签中放置浏览器解析源码整体设置信息,不会显示在网页-->
        <title>标签的属性</title>
        <!--指定字符编码,避免字符乱码-->
        <meta charset="utf-8">
    </head>
    <!--网页主题内容在body中定义-->
    <body>
        <!--h1是网页内容一级标题-->
	    <h1>显示修改标签的<font color="red" size=10>属性</font>
	    </h1>
    </body>
</html>

在这里插入图片描述

参考

尚硅谷李立超web教程
W3Cshool

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值