HTML入门语法(1)

最新推荐文章于 2022-08-16 15:08:17 发布

xiao_yu11

最新推荐文章于 2022-08-16 15:08:17 发布

阅读量288

点赞数

分类专栏： HTML学习文章标签： html 前端

本文链接：https://blog.csdn.net/xiao_yu11/article/details/50926292

版权

HTML学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近有门课需要用到HTML，所以我花了几个晚上学了一下HTML的语法，其实HTML挺简单的，只要你熟悉了它的语法，还有另外再花点时间学一下CSS，基本上你也可以做一个简单的前端（网站不包括后台，当然后台需要你另外再学一下PHP），好了言归正传，下面我就把我所学的(基本的和比较需要注意的)写出来一下，也方便我以后偶尔忘了回来看看。

1、HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。从h1到h6字体大小逐渐递减。

举例：<h1 align="center"> 你好！</h1> (align为设置标题位置)

2、HTML段落

HTML 段落是通过 <p> 标签进行定义的。

举例：<p>这是一个段落</p>

使用段落<p>是不会帮你自动留空格或者换行之类的，下面使用<pre>则有自动留空格或者换行效果。

3、HTML链接

HTML 链接是通过 <a> 标签进行定义的。

4、HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Linktext</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

5、HTML链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

6、HTML图像

HTML 图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

7、HTML水平线

<hr/> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

8、HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

实例

<!-- This is a comment -->

9、HTML折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br/> 标签：
  
  
   
   <p>This is<br />a para<br />graph with line breaks</p>

下面是对于字体设置的一部分的语法：

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。
<s>	不赞成使用。使用 <del> 代替。
<strike>	不赞成使用。使用 <del> 代替。
<u>	不赞成使用。使用样式（style）代替。

用法举例：<h1><b>你好</b></h1>

“计算机输出”标签

<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。

字体处理的标签：

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

用法举例：

效果图:

标签	描述
<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

举例用法：

例1：

例2：

<area> 可选的属性

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
href	URL	定义此区域的目标 URL。
nohref	nohref	从图像映射排除某个区域。
shape	· default · rect · circ · poly	定义区域的形状。
target	· _blank · _parent · _self · _top	规定在何处打开 href 属性指定的目标 URL。

<area>标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 <map> 标签中。:

<area>必需的属性

属性	值	描述
alt	text	定义此区域的替换文本。

10、HTML表格

表格由 <table>标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

举例用法：

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

11、表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
  
  
   
   <table border="1">
   
   <tr>
   
   <th>Heading</th>
   
   <th>Another Heading</th>
   
   </tr>
   
   </table>
   
   以下为列表标签
   
   
    
    标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用
 <ul> 代替它。
<menu> 已废弃。使用
 <ul> 代替它。

以下为无序列表的三种表示方法：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<h1>无序列表的方式<h1>
<h2>Disc 项目符号列表：</h2>
<ul type="disc">
<li>葡萄</li>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<h2>Circle 项目符号列表：</h2>
<ul type="circle">
<li>狐狸</li>
<li>老虎</li>
<li>狼</li>
<li>豹子</li>
</ul>
<h2>Square 项目符号列表：</h2>
<ul type="square">
<li>天空</li>
<li>大地</li>
<li>海洋</li>
<li>大气层</li>
</ul>
</body>
</html>

结果图：有序列表的几种用法：

<html>

<body>

<ol>

</ol>

<oltype="A">

</ol>

<h4>小写字母列表：</h4>

<oltype="a">

</ol>

<h4>罗马字母列表：</h4>

<oltype="I">

</ol>

<h4>小写罗马字母列表：</h4>

<oltype="i">

</ol>

</body>

</html>

结果图：

最后有一点小小补充：

A、 HTML <style> 元素

· <style> 标签用于为 HTML 文档定义样式信息。

· 您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

· <head>

· <style type="text/css">

· body {background-color:yellow}

· p {color:blue}

· </style>

· </head>

B、 HTML <meta> 元素

· 元数据（metadata）是关于数据的信息。

· <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

· 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

· <meta> 标签始终位于 head 元素中。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

好了，今天先写到这里，因为有点头痛，明天接着写！

xiao_yu11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门语法(1)

最近有门课需要用到HTML，所以我花了几个晚上学了一下HTML的语法，其实HTML挺简单的，只要你熟悉了它的语法，还有另外再花点时间学一下CSS，基本上你也可以做一个简单的前端（网站不包括后台，当然后台需要你另外再学一下PHP），好了言归正传，下面我就把我所学的(基本的和比较需要注意的)写出来一下，也方便我以后偶尔忘了回来看看。1、HTML 标题HTML 标题（Heading）是通过
复制链接

扫一扫

专栏目录