HTML介绍与基础操作

1.什么是HTML?

HTML 是用来描述网页的一种语言。
   HTML 指的是超文本标记语言: HyperText Markup Language
   HTML 不是一种编程语言，而是一种标记语言
   标记语言是一套标记标签 (markup tag)
   HTML 使用标记标签来描述网页
   HTML 文档包含了HTML 标签及文本内容
   HTML文档也叫做 web 页面

3.Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

4.HTML结构介绍

HTML

HTML+CSS

WEB网页三大基石

HTML：设计结构房子的结构

CSS：设计美化房子装修

JavaScript:动态效果

网站：一组网页的组合，一个网站包括很多网页。
网页：能够通过浏览器看到的页面都可以称为一个网页
   网页包括：文本，图像，视频，音频。
HTML-------用来实现一个网页的一种技术。
HTML：超文本标记语言
   超文本
   1.超出普通文本的范畴（除了可以插入文字，还可以插入视频等等）
   2.网页中都是以超链接的行为进行跳转。
   标记
   是一种语法的规范
   标记的规则： <字符> 字符一旦填入尖括号，就会代表不同的意思。

       网页中关于标记的分类：2大类
           围堵标记有开始有结束
           空标记   只有开始
   语言
   HTML不是编程语言是标记语言。

   任何网页都是一个文件，只要是文件，都有对应扩展名
       网页的扩展名： html htm

重点来了

   怎么利用HTML语言编写网页。只需要一个记事本就可以了

   步骤：

   1.新建一个记事本
   2.打开记事本，填入指定的内容进行保存即可
   3.更改记事本的扩展名为html即可
   4.使用浏览器打开查看即可。

HTML中提供了一种最标准的网页结构格式

   1.html标记
       <html></html>

5.HTML基本标签、双标签{必须成双成对的出现}

一、基本标签/双标签 [必须成双成对出现]
head:头部
title:标题
body:身体(主体)
h1-h6:标题标签
h7:相当于不写
段落标签：p /p
空格： 

二、单标签
换行：<br/>
水平线标签：<hr>或者<hr/>
<hr size="2" color="red" width="30%(50px)">大小颜色宽度(px)

三、有序列表：
<ol>
   <li>语文有序列表</li>
</ol>

四、无序列表：
<ul>
   <li>哈哈</li>
   <li>呵呵</li>
</ul>

五、块级标签清单标记：
<dl>
   <dt>咖啡</dt>
   <dd>心情不好的时候可以来两杯</dd>
   <dd>调整调整心情</dd>
</dl>

六、加图片：
<img src="5.gif" width = "100px" height= "100px" title="出来呀" alt="加载失败">

七、让图片动起来：跑马灯标签
<marquee direction="right"></marquee>

八、div相当于swing的容器：用来装东西市面上流行的布局都是div+CSS

<div>
   <input type = "button" value = "确定">
</div>

九、设置字体颜色和大小：
<span style="color:orange;font-size:30px">心情</span>

给浏览器背景设置图片背景
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品信息</title></head><body background="img/轮播图6.jpg" style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;"><h1 align="center">商品信息</h1><h2>产品类型</h2><hr /><dl><dt><ul><li>数码</li><dd><li type="circle">笔记本</li><li type="circle">手机</li><li type="circle">家电</li></dd><dt><li type="disc">美容</li><li type="disc">服装</li></dt></ul></dt></dl>
<hr />
<dl><dt>联系电脑</dt><dd>产品型号：&nbsp;联系ldeapad Y450A—TFU(NBA纪念版)</dd><dd>价格：&nbsp;4999元</dd><dd>所在地：&nbsp;北京</dd>
</dl>
<hr color="#007AFF" width="50%">
<h2>购物流程</h2>
<ol type="1"><li>确认购买信息</li><li>付款到贵美</li><li>确认收货</li><li>付款给商家</li><li>双方评价</li></ol></body>
</html>

HTML介绍与基础操作相关推荐

SQL（一）- 数据库介绍与基础操作
数据库介绍一.常用的数据库分为两大类: 关系型数据库非关系型数据库(NoSql) 关系型数据库概念:是建立在关系模型基础上的数据库,借助于集合代数等数学概念和方法来处理数据库中的数据. 关系型数 ...
Linux介绍和基础操作
文章目录操作系统Linux Linux基础知识 1. Linux 的概述 2. Linux 的历史 3. Linux系统的应用 3.1 服务器系统 3.2 嵌入式系统 3.3 桌面应用系统 3.4 ...
数据结构之优先队列：优先队列的介绍与基础操作实现，Python代码实现——14
优先队列(Priority queue)的介绍优先队列是计算机中一种抽象的数据结构类,它有着一个类似和队列或者堆的结构,但是其中每个元素额外有一个优先级别在一个优先队列中,一个高优先顺序的元素会先 ...
docker介绍+下载+基础操作---ubuntu/centos
0. 扫盲 1. 各种软件用什么语言写的 - zabbix(监控软件):php - ansible(批量管理主机,执行命令,无angent):python - openstack(云计算,管理虚拟机) ...
Tableau基础操作——界面简介及功能介绍
Tableau基础操作--界面简介及功能介绍 Tableau基础操作--界面简介及功能介绍一.界面简介菜单栏:设置工作表或仪表板的格式,保存文件等操作工具栏:展示常用命令,撤销.保存.添加数据源 ...
cameraraw面板大小调整_Camera Raw基础操作面板介绍
大家好,我是摄影师:爱撒谎的猫. 今天我想和大家分享的内容是:Camera Raw基础操作面板介绍. 我们每次将RAW格式的图片文件拖入Photoshop中时,最先出现的都是Camera Raw的基础 ...
html5 php 数据库操作,HTML_HTML5本地数据库基础操作详解，下面分别介绍本地数据库的各 - phpStudy...
HTML5本地数据库基础操作详解下面分别介绍本地数据库的各个API及其使用方法. 1.利用openDatabase创建数据库我们可以利用openDatabase方法创建数据库.openDataba ...
毕业论文/书籍格式-基础操作介绍以及word域的使用
毕业论文/书籍格式-基础操作介绍以及word域的使用一.基础操作 1.样式 2.章节标题 3.页面格式 4.页眉页脚 5.图表添加标题-题注二.word域的使用 1.域的基本操作 2.章节标题 3 ...
提交表单自动刷新_Web自动化测试：元素的基础操作和浏览器基础操作
上一节,我们了解了如何定位元素,其实也有涉及对于元素的操作,这一节我们就详细的介绍一下对于元素的操作和对于浏览器的一些操作一.对于元素的基础操作: clear():清除输入框内的文本 send_ke ...

HTML介绍与基础操作

1.什么是HTML?

2.HTML 标签

3.Web 浏览器

4.HTML结构介绍

给浏览器背景设置图片背景

HTML介绍与基础操作相关推荐

最新文章

热门文章

HTML介绍 与基础操作

1.什么是HTML?

2.HTML 标签

3.Web 浏览器

4.HTML结构介绍

给浏览器背景设置图片背景

HTML介绍 与基础操作相关推荐

最新文章

热门文章

HTML介绍与基础操作

HTML介绍与基础操作相关推荐