HTML基础（一）

什么是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>

空格

空格是用的 表示一个空格

<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基础（一）的更多相关文章

java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法下载windows x64版本下载之后解压,得到以下东西为了方便,我们直接在这个目录中 ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
Golang，以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
[C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法目录简介匿名方法的参数使用范围委托示例简介在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
.NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
.NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
.NET 基础一步步一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...

随机推荐

Collection View Programming Guide for iOS---(三)---Designing Your Data Source and Delegate
Designing Your Data Source and Delegate 设计你的数据源和委托 Every collection view must have a data source o ...
ccflow_002.表单引擎与流程引擎的关系
本节主要内容表单.数据.流程引擎的关系图形展示三者之间的关系流程编号和节点编号命名规则这里的206就是这个流程的编号 2601:01就是当前节点的编号流程编号206转换为int类型之后加上0 ...
简单聊聊ES6-Promise和Async
前言本篇博文出至于我的github仓库:web-study,如果你觉得对你有帮助欢迎star,你们的点赞是我持续更新的动力,谢谢! 异步编程在前端开发中尤为常见,从最早的XHR,到后来的各种封装aj ...
E20180427-hm
创建: 2018/04/27 dissolve vi. 溶解; 融化,液化; 解散,散去; 分裂,分解; vt. 使溶解; 使(固态物)溶解为液体,使液化; 使消失,使消逝,消除; 使终止; c ...
E20170512-hm
implicit adj. 不言明[含蓄]的; 无疑问的, conversion n. 变换,转变; precision n. 精确度, adj. 精确的, with precision 准确地 ...
bzoj 4530: [Bjoi2014]大融合【LCT】
新姿势,一般来讲LCT只能维护splay重边里的数据,而这里要求维护整颗子树的size 多维护一个sq表示当前点轻儿子的size和,si表示包括轻重边的整颗子树的大小然后需要改sq的地方是link和 ...
第四篇 .NET高级技术之结构体及值类型引用类型
结构体在平时的开发中很少自己去写结构体,他是一种值类型的数据.对于结构,不像类那样存在继承,一个结构体不能从另一个结构或类继承.但是结构体从基类Object继承. 语法: //struct是定义结构 ...
浅谈欧拉函数 By cellur925
1.某神犇Blog 学了三遍的欧拉函数φ--DEADFISH7 2.我要做一些补充o(*￣▽￣*)o $φ(1)=1$: 公式有两种形式,一种有太多除法,实际可能会慢些.通用对于任意$n$> ...
浅谈线段树（例题：[USACO08FEB]酒店Hotel）By cellur925
今天我们说说线段树. 我个人还是非常欣赏这种数据结构的.(逃)因为它足够优美,有递归结构,有左子树和右子树,还有二分的思想. emm这个文章打算自用,就不写那些基本的操作了... 1° 简单的懒标记( ...
ipset 学习总结
用途:当机器受到网络攻击时,使用 iptables 封 IP,有时候可能会封禁成千上万个 IP,如果添加成千上万条规则, 在一台注重性能的服务器或者本身性能就很差的设备上就不在适用了.ipset 就是 ...