HTML是一门标记语言,用于控制页面结构,HTML 通过标记告诉了浏览器以什么方式或者结构显示内容,作为初学者掌握HTML的一些常用标记是必要的.
标记在使用时必须用尖括号“<>”括起来,而且是成对出现,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。
所以应当遵循:<开始标签> 标签体 </结束标签>
特点
标签的特点:不区分大小写,标签名是固定的。
带标签体的标签 如: <p> XX </p>
不带标签体的标签 如:
写在开始标签上的 名=“值”对代表该标签的属性 <font color=“red”></font>。
一个标签可以有多个属性,多个属性之间使用空格隔开。
注意:属性值最好使用单引号或者双引号引起来。
<font color="red">你好</font>
注意事项:
1:所有标记都要用<> 尖括号括起来
2:成对出现的标记,最好开始和结束标记同时写完.
3:HTML中不区分大小写
4: 5:标记中不要有空格.
<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 之间的用于定义文档的头部
<title> 与 </title> 定义文档的标题
<body> 与 </body> 之间的文本是可见的页面内容
<p> 与 </p> 之间的文本被显示为段落
一个完整的html文件包括头部文件(head)和文件主体(body),头部标记是<head></head>。在这对标记中的内容为头部内容,HTML中的头部内容不直接在网页上显示。
可以用在 head 部分的标签:<title>,<base>, <link>, <meta>, <script>, <style>, 以及文本标签
代码+效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<meta name="keywords" content="java培训,net培训"/>
<meta name="description" content="这是一家专门卖猪肉的公司">
<title>html文本标签</title>
</head>
<body>
<!-- 标题 (h1~h6)-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 水平线(hr)--><hr/>
<!-- p 段落-->
<p>
第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容第一个章节的内容
</p>
<p>
第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节
</p>
<!-- 段落缩进(blockquote)-->
<blockquote>
第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节
</blockquote>
<!-- 上下标(sup和sub)用于公式-->
数学公式:y=x的平方:y=x<sup>2</sup>水的化学公式: H<sub>2</sub>O
<!-- 换行(br)-->
<br/>下一个内容
<!-- 原样输出(pre)按照编辑器的效果直接输出-->
<pre>
春晓
春眠不觉晓, 处处蚊子咬。
夜来大狗熊, 谁也跑不了!
</pre>
<!-- 有序列表 ol li type属性:序号的类型 -->
你最喜欢的明星?
<ol type="a">
<li>凤姐</li>
<li>芙蓉姐姐</li>
<li>如花</li>
</ol>学生管理系统
<!-- 无序列表 罗列项目 ul li type属性:disc实心圆 square实心方块 -->
<ul type="disc">
<li>学生管理</li>
<li>成绩管理</li>
<li>系统管理</li>
</ul>
<!-- 项目列表标签 dl dt dd -->
软件公司的组织架构
<dl>
<dt>技术总监</dt>
<dd>工程师1</dd>
<dd>工程师2</dd>
<dd>工程师3</dd>
<dd>工程师4</dd>
<dt>财务总监</dt>
<dd>出纳1</dd>
<dd>出纳2</dd>
</dl>
<!-- 行内标签 span 块标签 div html用的少,css用的多 -->
<span>span的内容</span>
<div>div的标签</div>
<!-- div+css网页布局 -->
<!-- a 超链接常用属性 href 表示连接到的地址.同级..上一级目录-->
<a href="../1.jpg">超链接</a>
<a href="http://www.baidu.com">超链接</a></body></html>
效果是这样的
屏幕快照 2017-01-05 下午9.10.43.png 屏幕快照 2017-01-05 下午9.10.50.png
网友评论