HTML入门
1介绍HTML(HypeText Markup Language)
<html>
<!--这是注释-->
<!-- 头信息的作用
1. 可以设置网页的标题。
2. 可以通知浏览使用指定的码表解释html页面。-->
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" /><!--使用指定码表来解释html页面-->
<title>这是网页的title</title>
<meta name="keywords" content="JAVA,HTML"/><!--关键字，供搜索引擎搜索-->
</head>
<!-- 网页的内容应该写在body标签体内的。 -->
<body>
这是网页的body
</body>
</html>
2常用标签
html标签用于描述一个网页的结构,填写网页内容。
通过标签的属性操作，还可以调整内容的样式。
html常用的标签：
<h1>~<h6> 表示是一个标题
<p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub> 下标
<sup> 上标
<pre> 原样标签： 原样标签会保留空格和换行符。
<ol> <li> 有序的列表标签、
<ul> <li> 无序的列表标签。
项目列表标签(dl dt dd)
行内标签(span)
块标签<div> div标签的内容会独立占一行。
例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html常用的标签</title>
</head>
<body>
<h1 align="center">这是居中的标题</h1>
<!--下面是六种字体大小依次减小的标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p> 这是一个段落</p>
<!--下面是一条水平线-->
<hr/>
<!--下面是一个换行符-->
<br/>
<!--下面展示下标的用法-->
水的化学式：H<sub>2</sub>O
<br/>
<!--下面展示上标的用法-->
2的16次方：2<sup>16</sup>
<hr/>
<!--下面是原样标签，原样保留标签内的空格和换行符。-->
<pre>
有了原样标签，就可以原样显示标签内的空格和换行符了，
不 信
你 看。
</pre>
<hr/>
这是有序的列表标签，可以通过其属性type,选择不同的符号。
<ol type="a">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ol>
这是有序的列表标签，可以通过其属性type,选择不同的符号。
<ul type="square">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
这是项目列表标签(dl dt dd)
<dl>
<dt>JAVA技术总监</dt>
<dd>码农1号</dd>
<dd>码农2号</dd>
<dd>码农3号</dd>
<dd>码农4号</dd>
<dt>UI主管</dt>
<dd>妹子1号</dd>
<dd>妹子2号</dd>
</dl>
<span>这是行内标签</span>
<div>这是块标签</div>
</body>
</html>
1介绍HTML(HypeText Markup Language)
<html>
<!--这是注释-->
<!-- 头信息的作用
1. 可以设置网页的标题。
2. 可以通知浏览使用指定的码表解释html页面。-->
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" /><!--使用指定码表来解释html页面-->
<title>这是网页的title</title>
<meta name="keywords" content="JAVA,HTML"/><!--关键字，供搜索引擎搜索-->
</head>
<!-- 网页的内容应该写在body标签体内的。 -->
<body>
这是网页的body
</body>
</html>
2常用标签
html标签用于描述一个网页的结构,填写网页内容。
通过标签的属性操作，还可以调整内容的样式。
html常用的标签：
<h1>~<h6> 表示是一个标题
<p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub> 下标
<sup> 上标
<pre> 原样标签： 原样标签会保留空格和换行符。
<ol> <li> 有序的列表标签、
<ul> <li> 无序的列表标签。
项目列表标签(dl dt dd)
行内标签(span)
块标签<div> div标签的内容会独立占一行。
例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html常用的标签</title>
</head>
<body>
<h1 align="center">这是居中的标题</h1>
<!--下面是六种字体大小依次减小的标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p> 这是一个段落</p>
<!--下面是一条水平线-->
<hr/>
<!--下面是一个换行符-->
<br/>
<!--下面展示下标的用法-->
水的化学式：H<sub>2</sub>O
<br/>
<!--下面展示上标的用法-->
2的16次方：2<sup>16</sup>
<hr/>
<!--下面是原样标签，原样保留标签内的空格和换行符。-->
<pre>
有了原样标签，就可以原样显示标签内的空格和换行符了，
不 信
你 看。
</pre>
<hr/>
这是有序的列表标签，可以通过其属性type,选择不同的符号。
<ol type="a">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ol>
这是有序的列表标签，可以通过其属性type,选择不同的符号。
<ul type="square">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
这是项目列表标签(dl dt dd)
<dl>
<dt>JAVA技术总监</dt>
<dd>码农1号</dd>
<dd>码农2号</dd>
<dd>码农3号</dd>
<dd>码农4号</dd>
<dt>UI主管</dt>
<dd>妹子1号</dd>
<dd>妹子2号</dd>
</dl>
<span>这是行内标签</span>
<div>这是块标签</div>
</body>
</html>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
