初识HTML

初识HTML

HTML基本概念

Hyper Text Markup Language（超文本标记语言）。HTML不是一种编程语言，而是一种标记语言，描述网页的语言。HTML使用标签描述网页中图片、文本、音乐、视频、超链接等

超文本——>（通过标签）组装——>（浏览器解释）呈现网页

HTML基本结构

HTML文件最外层是 < html > < /html > 标签，里面是< head > < /head>和< body> < /body>两部分内容

< head>中的< title>内容在网页中选项卡里显示，< body>中的内容在网页内容中显示.

网页的基本标签

1.标题标签

由h1~h6 六种格式标题标签。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

从h1~h6字体大小递减

2.段落标签

<p>...</p>

每个段落之间会自动换行，且两行之间间距比< br/>换行大

3.换行标签

<br/>

是一种自结束标签，起始标签和闭合标签都在同一个标签中完成

4.水平线标签

<hr/>

是一种自结束标签，起始标签和闭合标签都在同一个标签中完成

5.字体样式标签

(1)斜体

<em>...</em>

(2)字体加粗

<strong>...</strong>

6.注释和特殊符号

(1)特殊符号

(2)注释

HTML注释：

<!--注释内容-->

图像标签

常见的图像格式

常见的图像格式为：JPG、GIF、PNG、BMP四种

图像标签的语法：

<img src="图片(相对/绝对)路径" alt="替换文本" title="鼠标停留显示文字" width="宽度" height="高度"/>

链接标签

语法：

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

链接地址为要跳转到的链接的相对或绝对路径,

常用目标窗口位置：

1. _ self 在自身窗口跳转
2. _ blank 在新建窗口跳转

常用的超链接

（1）页面间链接

从一个页面链接到另一个页面，是网络上比较常见的链接方式

（2）锚链接

1.从A页面的甲位置跳转至本页中的乙位置
2.从A页面的甲位置跳转至B页面的乙位置

创建步骤：

1.创建跳转标记

<a name="marker">乙位置</a>

2.创建跳转链接

<a href="#marker">甲位置</a>

（3）功能性链接

如电子邮件、QQ、MSN登链接

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

列表的分类

（1）无序列表

<ul>      (声明无序列表)
     <li>....</li>      (声明列表项)
     <li>....</li>
     <li>....</li>
</ul>

（2）有序列表

<ol>      (声明有序列表)
     <li>....</li>      (声明列表项)
     <li>....</li>
     <li>....</li>
</ol>

（3）定义列表

<dl>      (声明定义列表)
     <dt>....</dt>      (声明列表项)
     <dd>....</dd>    (定义列表项内容)
     <dd>....</dd>
     <dd>....</dd>
</dl>

表格

使用表格的优点：

1.简单通用

2.结构稳定

表格的基本语法：

<table border="1">    (表格标签,border为设置边框)
   <tr>       (行标签)
         <th>1行1列的标题</th>     (标题标签)
  </tr>
   <tr>
         <td>1行1列的单元格</td>   (单元格标签)
  </tr>
   <tr>
         <td>2行1列的单元格</td>
  </tr>
</table>

表单

在上网时，大部分网站的一些注册、登录页面都采用了表单的形式展示。

表单的语法：

<form method="get/post" action="result.html">
<p>名字: <input name="name" type="text"/></p>
<p>密码: <input name="pass" type="password"/></p>
<p>
   <input type="submit" name="Button" value="提交"/>
   <input type="reset" name= "Reset" value="重置"/>
</p>
</form>

get/post 规定如何发送表单数据
result.html表示向何处发送表单数据

表单元素格式

表单格式的语法：

<input type="text" name="fname" value="text"/>

type处填input元素类型
name处填input元素名称
value处填input元素的值

常用的一些表单元素属性：

属性	说明
type	指定元素的类型。包括：text(文本框)、textarea(多行文本域)、password(密码框)、checkbox(复选框)、radio(单选按钮)、select(列表框)、option(列表项)、submit(提交按钮)、reset(重置按钮)、button(普通按钮)、file(文件域)、hidden(隐藏域)、image(图片按钮)，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单的高级应用

（1）隐藏域

元素类型为hidden，不在页面上显示内容，但同样会随其他数据一起提交的一部分内容。

<input type="hidden" value="666" name="userid"/>

（2）只读

属性为readonly，允许用户看见但不允许用户进行修改的数据行。

<input name="name" type="text" value="张三" readonly />

（3）禁用

属性为disabled，禁止用户进行修改的数据行。

<input type="submit" disabled value="保存" />

W3C HTML标准中，规定对于布尔类型的属性，属性值可以省略，如前面提到的readonly、disabled等。

W3C标准

W3C(World Wide Web Consortium)，万维网联盟，提出了HTML文件的一些书写规范：

1.标签名称、属性名称必须小写

2.标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合。

3.属性值必须用引号引起来