美文网首页程序员
前端学习笔记1-HTML基础

前端学习笔记1-HTML基础

作者: 一百万小可爱 | 来源:发表于2018-01-30 16:29 被阅读0次

HTML(Hypertext Markup language)不是一种编程语言,正如其英文全称所示,HTML仅是一种标记语言,它有许多元素,这些元素标签按照一定规则组合在一起形成的文档将告知浏览器我们所访问的网页的结构。网页开发者使用HTML元素以某种样式去展示想要展示的内容,可以强调某些内容,可以插入链接,可以展示文章等等。
1、HTML元素结构:
<p>这是一个段落标签</p>
HTML元素由基本的开始标签、内容和结束标签组成。除此之外,开始标签可以包含相应的属性/值对。
注意元素属性值的引号要对应,且不能遗漏,否则将导致浏览器错误解释成非理想结果。
2、HTML元素主要分为块级标签和行内标签两种。
块级元素:前后均有换行,独占一块内容。


块级标签.png

行内元素:和前后元素之间没有空格,紧挨着显示在一行。


行内标签.png
块级元素和行内元素的嵌套规则:块级元素不能嵌套于行内元素中,而行内元素和某些块级元素可以嵌套于块级元素中。(不是所有的块级元素均可嵌套于另一块级元素中的,如<div>标签不能嵌套于<p>标签中)。
3、简单的HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>

<body>
<p>This is my page</p>
</body>
</html>


<!DOCTYPE html>:文档类型说明,非HTML标签。
<html></html>:<html>元素,将包含网页的所有内容,也称为根元素。
<head></head>:<head>元素,里面包含的内容不在网页上显示出来,如标题,元数据,css内联样式或外联样式,字符集说明,说明内容,搜索关键词,作者,时间等等信息。
<meta charset="utf-8">:这个元素及属性表面网页所用的字符集为utf-8。
<title></title>:<title>元素,网页标题,添加收藏夹时也会显示该标题。
<body></body>:<body>元素,该标签中将包含网页中将要展示的所有内容。


以上简单介绍了HTML的基本内容,HTML文档的基本结构很简单,但展示丰富的网页内容需要开发者灵活运用各类标签及属性样式。内容简单,后续将继续学习探讨。打好基础是继续学习的坚实基础。

千里之行始于足下,不积跬步无以至千里。

相关文章

  • 前端学习笔记1-HTML基础

    HTML(Hypertext Markup language)不是一种编程语言,正如其英文全称所示,HTML仅是一...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • 前端测试

    目录 目录 1. 前端基础1.1 布局1.1.1 grid布局 2. Vue 学习笔记2.1 Vue模板创建 前端...

  • 2018-01-04

    Web学习笔记--从最基础的开始 一、web前端开发语言: HTML、 CSS 、JavaScript HTML:...

  • 前端基础学习笔记

    原生js document.getElementById()之类的方法 建议在onload事件之后调用 onloa...

  • 前端基础学习笔记

    原生js 之类的方法,建议在onload事件之后调用onload放在body里面

  • 零基础前端学习笔记01

    零基础前端学习笔记 今天开始第一天的前端学习,学习内容来自导师推荐的百度前端技术学院 我本身是学习测控技术与仪器专...

  • 1-html基础

    常用快捷键 windows + d 返回桌面 windows + e 我的电脑 windows + r ...

  • 前端学习笔记_HTTP基础

    打开一个网页的过程 输入网址 网址通过DNS匹配IP地址 与IP地址建立链接 发送HTTP请求 服务器解析请求,调...

网友评论

    本文标题:前端学习笔记1-HTML基础

    本文链接:https://www.haomeiwen.com/subject/oggqzxtx.html