1、HTML的语法（主要内容HTML语法格式、文档注释、代码格式）

HTML的特点

　　1.可以设置文本的格式，比如标题、字号、文本颜色、段落等等

　　2.可以创建列表（例如打开百度，我们可以看到这样的列表)

　　3.可以插入图像和媒体(例如百度首页我们也可以看到图片）

　　4.可以建立表格

　　5.超链接，可以使用鼠标点击超链接来实现页面之间的跳转

HTML的标记和他的属性

HTML文档的保存格式

.html

.htm

.xhtml

标记和被标记的内容构建出HTML文档

格式

<标记>

内容

</标记>

例：打开开发工具Notepad++，写下代码：

<html>

<body>

Hello

</body>

</html>

保存，新建一个文件夹，命名为“课程源文件”，打开文件夹“课程源文件”，新建一个文件夹，命名为“第一节课”，然后保存，保存的类型选择，如图：

然后我们打开“课程源文件”，接着打开“第一节课”，里边有我们刚才新建的内容，将其拖到浏览器中，浏览器中就会显示我们刚才新建的内容，“Hello”。

需要注意，标记是成对出现

标记的属性

标记的属性，就是用来控制我们的内容（图像、文本等的）如何的显示，格式如下：

<标记 属性1=属性值 属性2=属性值 ... ... >内容</标记>

例如<body bgcolor="red">内容</body>

以上的属性是用来控制我们的网页的背景颜色，bgcolor    就是body的属性，他的值是red（红色）

<html>

<body　bgcolor=”red”>

MAIZI

</body>

</html>

当我们刷新之后，整个网页背景就会变成红色：

语法不区分字母大小写

<HTML>、<Html>、<html>都是定义相同的标记，但是在编写网页的时候尽量使用小写

文档注释

注释一段内容时使用“<!--”开始，以"-->"结束，例如<!--我是这个网页的作者，我的名字叫做朱朝兵-->

注释的内容不会显示！！！！！！

字符实体

什么是字符实体？

比如我们想在网页上面显示一个“<”小于符号，但是“<”在HTML中是文档标记的开始语言，如果我们直接使用“<”会出差错，所以我们就会一些实体名称来代替！

常见的字符实体

显示结果----------描述----------实体名称----------实体编号

---------------------空格----------    ----------

<--------------------小于号---------- <---------- <

>--------------------大于号---------- >---------- >

&--------------------和号---------- &---------- &

"--------------------引号---------- " ---------- "

'--------------------撇号---------- ' (IE不支持)---------- '

￠--------------------分---------- ¢---------- ¢

£--------------------镑---------- £---------- £

¥--------------------日圆---------- ¥---------- ¥

€--------------------欧元---------- €---------- €

§--------------------小节---------- §---------- §

©--------------------版权----------©---------- ©

®--------------------注册商标---------- ®---------- ®

™--------------------商标---------- ™---------- ™

×--------------------乘号---------- ×---------- ×

÷--------------------除号---------- ÷---------- ÷

2、HTML的基本机构（主要内容标记<html><head><title><body>）

<html>内容</html>

解释：HTML文档的文档标记，也称为HTML开始标记

功能: 这对标记分别位于网页的最前端和最后端

<html>在最前端表示网页的开始

</html>在最后端表示网页的结束

<head>内容</head>

解释：HTML文件头标记，也称为HTML头信息开始标记

功能：用来包含文件的基本信息，比如网页的标题、关键字，在     <head></head>内可以放<title></title>、<meta></meta>、  <style></style>等等标记

注意:在<head></head>标记内的内容不会在浏览器中显示

<title>内容</title>

解释：HTML文件标题标记

功能：网页的“主题”，显示在浏览器的窗口的左上边

注意：网页的标题不能太长，要短小精悍，能具体反应页面的内   容，<title></title>标记中不能包含其他标记

<body>内容</body>

解释：HTML文档的主体标记

功能：<body>...</body>是网页的主体部分，在此标记之间可以包   含如<p></p>、<h1></h1>、<br>、<hr>等等标记，正是由   这些内容组成了我们所看见的网页

body标记的常见属性：

1.bgcolor

设置背景颜色

<body bgcolor="red"></body>

2.text

设置文本颜色

<body text="green"></body>

3.link

设置连接颜色

<body link="blue"></body>

4.vlink

已经访问了的链接颜色

<body vlink="yellow"></body>

5.alink

正在被点击的链接颜色

<body alink="red"></body>

<meta>内容</meta>

解释：页面的元信息（meta-information）

功能：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

必须的属性：

content

值：some_text

定义与 http-equiv 或 name 属性相关的元信息

常见的属性：

1.常用的name属性：

1.author

2.keywords

3.description

6.others

把 content 属性关联到一个名称：比如描绘出网页的关键词：<meta name="keywords" content="html学习之html结构">

注意：meta标记必须放在head元素里面

前端学习:html基础学习一的更多相关文章

  1. vagrant的学习 之 基础学习

    vagrant的学习 之 基础学习 本文根据慕课网的视频教程练习,感谢慕课网! 慕课的参考文档地址:https://github.com/apanly/mooc/tree/master/vagrant ...

  2. JsRender 前端渲染模板基础学习

    JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...

  3. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  4. 前端学习:html基础学习五

    9.HTML表单设计(主要内容<form><input><select>标记) 表单标记 <form>...</form> <form ...

  5. 前端学习:html基础学习四

    7.HTML表格(主要内容<table><caption><tr><th><td>标记) <table>标记 基本格式 < ...

  6. 前端学习:html基础学习三

    5.图像标记(主要内容<img>标记) <img>标记的使用方法 <img src="路径/文件名.图片格式" width="属性值&quo ...

  7. 前端学习:html基础学习二

    3.文档设置标记上-格式标记(主要内容标记<br><p><center><pre><li><ul><ol><d ...

  8. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  9. [AngularJS学习笔记] 基础学习01

    2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...

随机推荐

  1. python 创建列表和向列表添加元素方法

    今天的学习内容是python中的列表的相关内容. 一.创建列表 1.创建一个普通列表 >>> tabulation1 = ['大圣','天蓬','卷帘'] >>> ...

  2. .NET 对 XML 进行创建，增加，删除，修改操作整理

    前言: 最近做了一个项目,程序A在一个服务器程序B在另一台服务器,然而主程序A需要访问程序B的图片集文件夹下载到本服务器上,为了防止多次对Web Services进行调用,在主程序A中创建一个XML文 ...

  3. SDWebimage如何获取缓存大小以及清除缓存

    sdwebimage如何获取缓存大小以及清除缓存 1.找到SDImageCache类 2.添加如下方法: - (float)checkTmpSize {    float totalSize = 0; ...

  4. Laravel学习笔记（二）

    解决了类自动加载的问题,剩下的问题就是看文档了,laravel的官方文档虽然简单,但是却包含了很多基础知识,学习Laravel最好先看看官方文档,我感觉帮助很大,因为laravel框架的源码看起来并不 ...

  5. ADB usb 或 WiFi 连接手机 ADB工具下载

    ADB usb 或 WiFi 连接手机 ADB工具下载 小米 MIUI8.5 手机开启USB调试 1.设置-->我的手机-->全部参数-->MIUI版本--->连续点N次 2. ...

  6. Hibernate框架HQL语句

    这篇随笔将会记录hql的常用的查询语句,为日后查看提供便利. 在这里通过定义了三个类,Special.Classroom.Student来做测试,Special与Classroom是一对多,Class ...

  7. 队列queue(1) 结构体实现队列

    前言 首先,我们先来做一道解密题:一串数列 7  6  8  6  6  7  0  4  1  ,规定一个回收站,把第一个数删除,添加到回收站里,然后把第二个数排到队伍最末尾,把第三个删除,添加到回 ...

  8. iOS开发之Xcode常用调试技巧总结

    转载自:iOS开发之Xcode常用调试技巧总结 最近在面试,面试过程中问到了一些Xcode常用的调试技巧问题.平常开发过程中用的还挺顺手的,但你要突然让我说,确实一脸懵逼.Debug的技巧很多,比如最 ...

  9. Spring（概念）

    在本文中只讲述一些概念性的东西,因为我在开始学习JAVA的时候对这些概念性的东西总是不太理解,总结总结再感悟一下,也方便后人. 理解的不深,用通俗的语言讲一下: 百度百科这样介绍: spring框架主 ...

  10. js垃圾回收机制

    垃圾回收机制,简称GC(garbage collection),会定期(周期性)地回收那些不再使用的变量,然后释放其内存. 而内存占用的情况有很多: 1.变量 2.字面量对象声明:var obj = ...