什么是HTMLHTML

Hypertext Markup Language:即超文本标记语言

HTML特点

1.HTML不需要编译,直接由浏览器执行

2.HTML文件是一个文本文件

3.HTML文件必须使用html或htm为文件名后缀

4.HTML大小写不敏感HTML与htm-样

HTML基本结构

第一个HTML页面

<html >
<head>
<title>Title</title>
</head>
<body>
<p>hello world !</p>
</body>
</html>

用浏览器打开,可以看到页面显示了hello world !

注释

注释是代码之母,所以写代码最好写上注释,方便你我他

我们给上面的代码加上注释

<html >
<head>
<title>Title</title>
</head>
<body>
<p>hello world !</p> <!-- 这是p标签 -->
</body>
</html>

乱码

我们在给上面html加段中文

<html >
<head>
<title>Title</title>
</head>
<body>
<p>hello world !</p> <!-- 这是p标签 -->
<p>我是中文。。。</p>
</body>
</html>

然后刷新浏览器看看效果

我们发现写的中文在浏览器上不显示,因为浏览器默认不支持中文,如果想让我们的代码正常的显示,那就要我们在head标签里加上下面的一句代码

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

上面的意思就是告诉浏览器以utf-8的编码格式打开

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p>hello world !</p> <!-- 这是p标签 -->
<p>我是中文。。。</p>
</body>
</html>

然后刷新浏览器之后就能正常显示了

标题标签

标题标签是h系列,从h1-h6

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
</body>
</html>

段落标签

段落标签是p标签,可以使大段的文字在一段显示

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p>也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
<p>也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
<p>也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
</body>
</html>

p标签的align对齐属性

left:     左对齐内容
right: 右对齐内容
center: 居中对齐内容
justify: 对行进行伸展,这样每行都可以有相等的长度

对上面的代码分别加上对齐方式

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p align="left">也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
<p align="right">也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
<p align="center">也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
<p align="justify">也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素:
网页显示编码、网页存储编码、数据库编码网站出现中文显示乱码的时候,
请先从这三个方向去考虑解决问题,将事半功倍。
</P>
</body>
</html>

查看效果

换行br

上面的p标签我们在编辑器里显示了六行,而在浏览器里只显示了三行,如果我们也要它按照浏览器的样式显示,那我们就要用br标签了

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p >也就是说,我们在遇到乱码问题的时候,是由于编码不一致导致的。<br />
这个是html网页的乱码情况的总结,我们举一反三,<br />
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,<br />
我们也要通过三个因素来考虑解决问题。我总结的三个因素:<br /> </P> </body>
</html>

空格

空格是用的&nbsp;表示一个空格

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;也就是说,
我们在遇到乱码问题的时候,是由于编码不一致导致的。<br />
这个是html网页的乱码情况的总结,我们举一反三,<br />
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,<br />
我们也要通过三个因素来考虑解决问题。我总结的三个因素:<br /> </P> </body>
</html>

pre格式化标签

按照编辑器的样式显示

<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<pre > 也就是说,
我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候,
我们也要通过三个因素来考虑解决问题。我总结的三个因素: </pre> </body>
</html>

水平线hr

<hr />水平线,在页面上展示一条水平线,有如下属性

width:   设置水平线宽度,可以像素或百分比
color: 设置水平线颜色
align: 设置水平线居中对齐
noshade: 设置水平线无阴影
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p> 也就是说,
我们在遇到乱码问题的时候,是由于编码不一致导致的。
这个是html网页的乱码情况的总结,我们举一反三,
我们在使用php虚拟主机建站的时候遇到乱码问题的时候, </p>
<hr width="80%" color="red" align="left" noshade="noshade"/> </body>
</html>
width="80%"  表示占页面宽度的80%
color="red"  表示线是红色的

align="left" 左对齐
noshade="noshade" 没有阴影

修饰标签

常用的修饰标签有

文字斜体:<i></i>,  <em></em>
加粗:<b></b>, <strong></strong>
下标:<sub></sub>
上标:<sup></sup>
下划线:<ins></ins>
删除线:<del></del>
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body> <p><i>我们</i>在遇到乱码问题的时候,是由于<em>编码</em>不一致导致的。</p>
<p>这个是<b>html</b>网页的乱码情况的总结,我们<strong>举一反三</strong>,</p>
<p>我们在使用php虚拟<sub>主机</sub>建站的时候遇到<sup>乱码</sup>问题的时候,</p>
<p>在<ins>苍茫的大海上</ins>,海燕在<del>高傲的飞翔</del></p> </body>
</html>

效果

特殊符号

有些符号我们不能直接在页面上进行输入,比如我们想让页面显示<hr />,如果直接输入的话,会在页面显示一条线,这时候我们就要用到特殊符号了,常用的有

&lt;    <
&gt; >
&reg; ®
&copy; ©
&trade; ™
&nbsp; 空格

HTML基础(一)的更多相关文章

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Golang, 以17个简短代码片段,切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  5. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  6. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  7. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  8. .NetCore MVC中的路由(1)路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  9. .NET基础拾遗(5)多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  10. .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]

    方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...

随机推荐

  1. Codechef SEPT17

    Codechef SEPT17 比赛链接:https://www.codechef.com/SEPT17 CHEFSUM code给定数组 a[1..n] ,求最小的下标 i ,使得 prefixsu ...

  2. STL--lower_bound()&upper_bound();

    又是两个黑科技一般的存在. 首先我们来介绍一下这两个函数: ForwardIter lower_bound(ForwardIter first, ForwardIter last,const _Tp& ...

  3. linux中用无名管道进行文件的读写

    1管道是什么: 水管子大家知道,有两端,在此一端用来读一端用来写,其中一端的输出作为另外一端的输入. 2 函数原型 int pipe(int pipefd[2]);//参数中分别代表的两端 3 例子: ...

  4. Vue-i18n实现语言切换

    方法1 Vue — i18n 国际化 全局配置 安 装 1.直接引入js文件 <script src="https://unpkg.com/vue/dist/vue.js"& ...

  5. HDU6031:Innumerable Ancestors(二分+倍增数组)

    传送门 题意 n个点的图,有n-1条无向边,m个询问,每次询问 给出两个集合a和b,找到a的一个元素x,b的一个元素y,使得x和y的lca深度最大 分析 这道题如果直接暴力做,复杂度为O(mk1k2* ...

  6. 51nod 1095【映射】

    思路: 利用一个map记录初始的,利用一个map记录排序后的. #include <bits/stdc++.h> using namespace std; map<string,in ...

  7. mysql关于时间函数的应用

    1.获取今天的数据 date_format(publishtime, '%Y-%m-%d')= date_format(now(), '%Y-%m-%d') 2.获取今天和明天的数据 server.b ...

  8. 3分钟入门微信小程序直播

    效果预览 开发环境搭建 安装微信开发者工具   相对于以前微信以前的产品来说.小程序在发布之初就面向开发者开放微信开发者工具.使开发者更加方便的开发和调试小程序.我们从官网下载安装.官网下载地址.现在 ...

  9. php连接mysql并读取数据

    <?php $server_name="localhost:3306"; //数据库服务器名称 $username="root"; // 连接数据库用户名 ...

  10. Qt样式表之一:Qt样式表和盒子模型介绍

    一.Qt样式表介绍 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CS ...