前端学习（8）：HTML的基本属性和结构

一、HTML文档结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>

<!DOCTYPE html>声明为HTML5文档（html版本说明）
<html>....<html/>:是文档的开始标记和结束标记。是html页面的根元素，在他们之间是文档的头部。包含文档的元数据（meta）数据
<title>....</title>定义网页标题，在浏览器标题栏显示
<body>.....<body/>之间的文本是可见的网页主题内容

注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为。

二、HTML标签格式

HTML标签是由尖括号包围的关键字，如''<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

三、HTML注释

注释是代码之母。

四、标签

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html>标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<!DOCTYPE html>
<html lang="en">
<header title="歌谣">haho</header>
<footer title="yao">hah</footer>
<body></body>
</html>

运行结果

前端学习（8）：HTML的基本属性和结构相关推荐

前端学习（2979）：vue-element-admin结构always:true始终显示
前端学习（2979）：vue-element-admin结构
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
一个普通本科在校生的前端学习之路
原创西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站.我的个人博客以及segmentFault和掘金. 转载请注明出处这是西安初级前端群里边 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！
https://risingstars.js.org/2019/en 大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年 ...