zoukankan      html  css  js  c++  java
  • 前端学习:html基础学习一

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

    HTML的特点

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

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

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

      4.可以建立表格

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

    HTML的标记和他的属性

    HTML文档的保存格式

    .html

    .htm

    .xhtml

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

    格式

    <标记>

    内容

    </标记>  

    例:打开开发工具Notepad++,写下代码:

    <html>

    <body>

    Hello

    </body>

    </html>

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

    5.png 

    然后我们打开“课程源文件”,接着打开“第一节课”,里边有我们刚才新建的内容,将其拖到浏览器中,浏览器中就会显示我们刚才新建的内容,“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元素里面

  • 相关阅读:
    阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_5_InvalidClassException异常_原理
    阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_4_transient关键字_瞬态关键字
    阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_3_对象的反序列化流_ObjectInputStream
    阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_2_对象的序列化流_ObjectOutputStream
    阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_08 转换流_5_InputStreamReader介绍&代码实现
    Linux启动流程
    静态库和动态库的区别
    uboot各种目录下的文件作用
    编译选项含义
    C++转换构造函数与类型转换构造函数
  • 原文地址:https://www.cnblogs.com/richiewlq/p/7678663.html
Copyright © 2011-2022 走看看