HTML基础(1)

1.什么是HTML?

html----超文本语言

超文本;超越语言 文字 视频 音频,HTML也可以显示它文字性的数据,也可以制作视频,图片,音频等。

标记:标签,编写HTML就是使用它所提供的标记,用来实现它所有的功能。

<table> <img>等常用的标记

2.HTML的作用?

制作网页的界面

3.常见的HTML开发工具

(1)记事本:最快捷的工具,可以作为应急时候的工具

缺点:工作效率慢。

(2)Notepad++:http://www.html.cn/tool/edit/2.html
         Sublime Text:http://www.html.cn/tool/edit/6.html
         WebStorm:https://www.html.cn/tool/edit/8.html
         HBuilderX: https://www.dcloud.io/hbuilderx.html
          VS Code:https://code.visualstudio.com/

(3).使用HBuilderX

(4)4.使用VS Code
         VS Code:https://code.visualstudio.com/
         "VSCodeUserSetup-x64-1.56.2.exe"
         开始---控制面板---程序和功能--VSCodeUser--选中---右键---卸载
        安装
        在指定目录下新建一个文件夹,保存安装好的文件
         双击运行VSCodeUserSetup-x64-1.56.2.exe,修改安装路径
         创建文件
        文件--新建文件---Ctrl+S【保存】
        修改文件保存路径
        文件名:xxxx.html
        修改文件类型:  HTML

问题1:我们安装好的VS Code有时可能在运行的时候找不到Open in Default Browser选项,这是怎么办?
首先点击扩展(也就是四个小方格),在搜索栏内输入 Open。
下载安装open in browser,点击 install,就可以了。

问题2:操作菜单是英文,如何汉化?
首先点击扩展(也就是四个小方格),在搜索栏内输入 Chinese。
下载安装简体中文,点击 install ,在右下方会出现 restart 点击就好。

4.浏览器

浏览器是HTML的运行环境

主流的浏览器内核只有四种,在内核的基础上,添加不同的功能。

1、Trident 内核 
    代表产品为 Internet Explorer,又称其为 IE 内核。Trident(又称为 MSHTML),是微软开发 的一种排版引擎。使用 Trident 渲染引擎的浏览器有:IE、傲游、世界之窗浏览器、Avant、 腾讯 TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等 。 
    2、Gecko 内核 
    代表作品为 Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎,是最 流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器Firefox、Netscape6 至 9。
    3、WebKit 内核 
    代表作品有 Safari、Chrome。WebKit 是一个开源项目,包含了来自 KDE 项目和苹果公司的一些组件,主要用于 Mac OS 系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对 网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示 。
    4.Presto 内核 
    代表作品 Opera。Presto 是由 Opera Software 开发的浏览器排版引擎,供 Opera 7.0 及以上使 用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎,包括加入动态功能,例如网页 或其部分可随着 DOM 及 Script 语法的事件而重新排版。
    不同的浏览器可能因为采用的内核不同,网页也会呈现出不同的效果。

5.  HTML的结构文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HBuilderX</title>
    </head>
    <body>
        <h1>使用HBuilderX编辑HTML</h1>
    </body>
</html>

HTML网页都是由两部分组成

<html>相当于整个网页

<head>相当于网页的头部

<body>相当于网页的身体部分

6.HTML中的常用标记

html是超文本语言,所以它提供了制作网页的一些标记

(1)标记不能自我发明和创作

(2)大部分的标记都是由三部分组成的

<title>开始标记

</title>结束标记

(3)也会有一些单标记(只有开头,没有文本内容,没有结束标记 <br> <meta charset="utf-8">)

(4)<html>双标记,整个网页 其他的标记都要包进来

(5)<head>网页头部信息,为浏览器问价提供附加信息的

(6)<title>设置当前网页的标题

(7)<body>网页的身体部分 是我们网页操作的主要部分 因为body中的内容是可以被用户所看到的

(8)<h1>网页中内容的标题标记 <h1>----<h6>字体由大到小

7.<meta>介绍

<!DOCTYPE html>
<html>
    <head>
        <!-- 1.设置当前网页的字符编码-->
        <meta charset="utf-8">
        <!-- 2.为搜索引擎定义关键词-->
        <!--<meta name="keywords" content="Html" />-->
        <!--3.为网页定义描述内容-->
        <!--<meta name="description" content="这是一个html网页">-->
        <!--4.设置当前网页自动刷新-->
        <!--<meta http-equiv="refresh" content="5">-->
        <!--5.设置当前在间隔时间以后自动跳转到其他页面-->
        <!--<meta http-equiv="refresh" content="5,http://www.baidu.com" />-->
        <!--6.设置当前网页的作者-->
        <!--<meta name="author" content="网星">-->
        <title>meta标记</title>
    </head>
    <body>
        <h3>meta标记---出现在head里面,meta标记为浏览器运行html文件提供附加信息的主要标记</h3>
        <h3>meta标记--是一个单标记</h3>
        <h3>meta标记中的charset="utf-8"是这个标记的一个属性</h3>
    </body>
</html>

8.网页中内容的标题标记

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>h系列的标记</title>
    </head>
    <body>
        <h3>标题的设置--head中的title标记,设置的是当前网页的标题</h3>
        <h3>标题的设置--h系列的标记,设置设置内容的标题</h3>
        <h3>内容的标题共有6个从h1~h6</h3>
        <h3>h1设置的标题字体最大,h6字体最小,自动加粗</h3>
        <h3>这类标记会自定换行,自成一行</h3>
        <h1>设置内容的标题</h1><h2>设置内容的标题</h2><h3>设置内容的标题</h3>
        <h4>设置内容的标题</h4><h5>设置内容的标题</h5><h6>设置内容的标题</h6>
    </body>
</html>

9.hr设置一条水平分割线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hr标记</title>
    </head>
    <body>
        <h1>hr标记---设置一条水平分割线</h1>
        <hr color="blue" size="70"  width="400" align="left">
        <h1>color---设置分割线的颜色</h1>
        <h1>size---设置分割线的粗细</h1>
        <h1>width---设置分割线的长短</h1>
        <h1>align---设置分割线的水平对齐方式【left/center/right】</h1>
    </body>
</html>

10.p 表达一个段落标记

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>0301练习</title>
    </head>
    <body>
        <h1 align="center">不第后赋菊</h1>
        <h4 align="center">唐-黄巢</h4>
        <p align="center">
            待到秋来九月八,
            我花开后百花杀,
            冲天香阵透长安,
            满城尽带黄金甲
        </p>
        <p align="center">
            这首诗出自唐末农民起义领袖黄巢,其古诗全文如下:待到秋来九月八,我花开后百花杀。
            冲天香阵透长安,满城尽带黄金甲。黄巢因考取功名落第,而对腐败黑暗的唐末社会产生不满,继而产生推翻旧王朝,
            建立新政权的远大抱负。”
        </p>
        <hr color="red" size="5"   align="center">
    </body>
</html>

11.html注释

注释是用来标注,解释说明html代码的含义。
方便别人/以后的自己阅读,看懂代码。
注释的内容不会被执行。
<!--  需要被注释的内容 ,被注释的内容可以有多行 -->

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值