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 > 也就是说，
我们在遇到乱码问题的时候，是由于编码不一致导致的。<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 />，如果直接输入的话，会在页面显示一条线，这时候我们就要用到特殊符号了，常用的有
< <
> >
® ®
© ©
™ ™
空格
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 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...
随机推荐
- E20180426-hm
transition n. 过渡,转变,变迁; [语] 转换; [乐] 变调 flip vt. 按(开关); 快速翻转; 急挥; n. 空翻; 浏览; (射击时枪管的) 跳跃; 轻抛; win ...
- hdoj1495简单BFS
#include <stdio.h> #include <string.h> #include <math.h> #include <algorithm> ...
- bzoj 2927: [Poi1999]多边形之战【博弈论】
先手必胜状态是黑三角在边上 然后其他情况脑补一下,n为偶数先手必胜,可以理解为从某一边取,先手总有办法让后手取得一边有奇数个 #include<iostream> #include< ...
- bzoj 3261 最大异或和【可持久化trie】
因为在后面加数字又求后缀和太麻烦,所以xor[p...n]=xor[1...n]^xor[p-1...n]. 首先处理出来区间异或前缀和,对前缀和建trie树(在最前面放一棵0表示最开始的前缀和 然后 ...
- 3.bool布尔值int,str的转化，字符串的常用方法，字符串format，is判断（字符串的数字），for循环
1.bool 布尔值 bool 布尔值 -- 用于条件使用 True 真 False 假 True 真 False 假 print(bool(-10)) # 0 是 False 非0的都是True p ...
- 你不知道的meta标签
前言 meta标签可以用来做seo优化.指定移动端viewport的展现形式.设置http请求.告诉浏览器缓存静态资源的模式等等.今天整理一下使用meta标签实用的,常见的场景. meta标签的组成 ...
- 莫队初探（不带修/例题极少）By cellur925
因为今天考到莫队裸题了嘤嘤嘤...而我这样的蒟蒻肯定不会这样的高端算法啊QAQ.于是暴力水了40分qwq. 正如上文所说,我实在太菜了,于是学习莫队也只是学习了最简单的不带修普通莫队,如果我能苟到省选 ...
- fiddler安装及抓取http和https请求
安装fiddler 安装完成,此时就可以抓取http请求了 如果要抓取https请求,就需要更新fiddler为最新版,并安装证书 1.检查更新fiddler为最新版 2.下载证书并安装 https证 ...
- 递归（Recursion）
递归是一种非常常用的算法,分为“递”和“归”两个步骤.满足递归算法有三个条件:1.一个问题,可以分解为子问题:2.该问题,与分解后的子问题,解决思路一致:3.存在终止条件.案例演示:假设有n个台阶,每 ...
- 2018 年度码云热门项目排行榜 TOP 10
2016 年度码云热门项目排行榜 TOP 10 是通过开源项目2016年在码云上的 Watch.Star.Fork 数量来评定的榜单.码云平台发展至今,涌现了越来越多优秀的开源项目,越来越多的开源作者 ...