目录

HTML 基础元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

文本格式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本格式化练习</title>
</head>
<body>
	<h1>
	<b>这个文本是加粗的</b>
	</h1><br />
<strong>这个文本是加粗的</strong><br />
<big>这个文本字体放大</big><br />
<em>这个文本是斜体的</em><br />
<i>这个文本是斜体的</i><br />
<small>这个文本是缩小的</small><br />
这个文本包含
<sub>下标</sub><br />
这个文本包含
<sup>上标</sup>
</body>
</html>

对空行和空格进行控制

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>对空行和空格进行控制</title> 
</head>
<body>
<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>
</body>
</html>

HTML超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>超链接</title> 
</head>
<body>
<a href="https://www.csdn.com/" target="_blank">访问CSDN!</a>
<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>
</body>
</html>

头部

<mark>title</mark>标签定义了HTML文档的标题(定义了浏览器工具栏的标题)
<mark>base</mark>定义了所有超链接默认的链接目标地址
<mark>meta</mark>文档的描述,作者,字符集META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
<mark>link</mark> 标签定义了文档与外部资源之间的关系。<mark>link</mark> 标签通常用于链接到样式表:

在head元素中你被允许插入脚本<mark>scripts</mark>,样式文件<mark>CSS</mark>,以及各种meta信息.可以添加在头部区域的元素标签为: <mark>title</mark>, <mark>style</mark>,<mark>meta</mark>, <mark>link</mark>, <mark>script</mark>, <mark>noscript</mark>, and <mark>base</mark>

HTML样式–CSS

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 head 区域使用style 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件
  • 推荐使用的是外部引入的方式来添加HTML的样式

内联样式

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center">我是一个居中的标题</h1>

内部样式表

<head>
<style type="text/css"> body {background-color:yellow;} p {color:blue;} </style>
</head>

在HTML中插入图像

<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>
<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

语法:

<img src="url" alt="some_text">

img标签是一个空标签,只包含属性,而不是一个闭合标签
关于插入图像的两个属性:<mark>src</mark>和<mark>alt</mark>

  • src(源属性),源属性的值是图像的URL地址
  • alt为图像定义一串可替代的文本.(当图像无法正常显示时,就显示这些预备的文本)

其他属性:

  • width:设置图像的宽度
  • height:设置图像的高度

插入图像作为超链接

其实就是把图像标签嵌入到超链接标签中,在HTML中标签是可以嵌套使用的

<p>创建图片链接:
<a href="//www.csdn.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="//www.csdn.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

表格

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
用th标签表示表头,表头一般会加粗显示
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>

    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

列表

  • 有序列表
  • 无序列表
  • 自定义列表

有序列表

<p>默认的有序列表是从数字1开始排序的
也可以指定开始的数字或者字母</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<p>小写字母列表</p>
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<p>罗马数字列表</p>
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

无序列表

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <mark>dl</mark> 标签开始。每个自定义列表项以 <mark>dt</mark> 开始。每个自定义列表项的定义以 <mark>dd</mark> 开始。

  • dl定义列表
  • dt定义列表项
  • dd定义列表描述信息 
<h4>自定义列表</h4>
	<dl>
		<dt>西瓜</dt>
		<dd>一种水果</dd>
		<dt>黄瓜</dt>
		<dd>一种蔬菜</dd>
	</dl>

HTML区块div和span

HTML 可以通过 <mark>div</mark> 和 <mark>span</mark>将元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。

  • div没有什么实际含义,定义了在其中的标签的显示格式为块级
  • span没有什么实际含义,一般用来作为文本的容器

表单

HTML 表单用于收集不同类型的用户输入。

<form action="">
	用户账号:<input type="text" name="username" >
	用户密码:<input type="password" name="password" >
	<p>
		<b>注意：</b>
	 	表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。
	 </p>
</form>
  • 文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
  • 密码字段通过标签 来定义.
  • 标签定义了表单单选框选项 
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
  • 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
  • 定义了提交按钮.
  • 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>