HTML基础

HTML基本结构

<!DOCTYPE html>	声明文档类型
<html lang="zh-CN">
<head>
    <meta charset="utf-8">	字符集编码
    <title></title>	页面标题
</head>

<body>
</body>
</html>

<html>...</html>表示html文件开始和结束的位置,作为文件的根元素
<head>...</head>表示html文件的头部,包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等
<body>...</body>表示文档的主体区域,包含页面上的内容,如文本，图片，音频，游戏等

HTML标签

一个html标签元素（Element）通常有开始标签（Opening tag）、结束标签（Closing tag）、内容（Content）,有的可以是单一开始标签,也有的可以没有内容或元素

HTML的分类

<标记名称>: 单一型,无设置值.如 
<标记名称属性=“属性值”>:单一型,有设置值,如<hr color="red>"
<标记名称></标记名称>:对称型,无设置值,如<title></title>
<标记名称属性=“属性值”></标记名称>:对称型,有设置值,如<body bgcolog="red"></body>

常用HTML标签

参见w3school

标题

<h1>常用于网站标题</h1>
<h2>常用于页面主题的文章标题</h2>
...
<h6></h6>

段落

<p>段落内容</p>
<p align="对齐方式">有left、right和center</p>

<p align='center'>你好啊</p>

你好啊

滚动

1
2
3

<marquee direction="滚动方向" behavior="滚动方式">内容</marquee>

<marquee direction="left" behavior="alternate">你好</marquee>

你好啊

列表

无序列表

<ul type="circle">
    <li></li>
    <li></li>
</ul>

type有disc,circle,square

有序列表

<ol type="a">
    <li></li>
    <li></li>
</ol>

type有a,A,1,i,I

图像与多媒体

1	<img src="" alt="" >

src表示路径,可以是绝对/相对路径或者网址
alt表示替代文本

1	<bgsound src="" loop="播放次数">背景音乐</bgsound>

超链接

<a href="路径" target="打开方式" title="悬停显示内容">链接内容</a><p>我创建了一个指向<a href="https://www.mozilla.org/zh-CN/"   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>的超链接。</p>

我创建了一个指向 Mozilla 主页的超链接。

电子邮件链接,用mailto:电子邮件地址
1
<a href="mailto:xxxx@qq.com">向daiera发邮件</a>
向daiera发邮件

表格

<table>    <tr>    	<td colspan="跨的列数"></td>        <td></td>    </tr></table><table>    <tr>    	<th rowspan="2" align="center">信息</th>        <th>姓名</th>        <td colspan = "3" align="center">Daiera</td>    <tr>        <th>年龄</th>        <td>21</td>        <th>民族</th>        <td>汉族</td>    </tr></table>

信息	姓名	Daiera
信息	年龄	21	民族	汉族

表单

1	<form action="表单的处理地址 name="表单名字" method="提交方法"> input 元素</form>

method有get,post等

form中的组件

文本框与密码框

1	<form> name:<input type="text" value="" name="userName"/> <br> password:<input type="password" value="123456" name = "pwd"/></form>

单选按钮与复选框

<form>    <input type="radio" value="单选按钮值" name="名称" checked/>内容    <input type="checkbox" value="复选按钮值" name="名称" checked/>内容</form><form>    <input type="radio" value="man" name="check1" checked/>男    <input type="radio" value="woman" name="check1" />女    <input type="checkbox" value="1" name="check2" checked/>1    <input type="checkbox" value="2" name="check2" />2    <input type="checkbox" value="3" name="check2" />3</form>

按钮
1
<form> <input type="button" value="按钮" name="button1" onclick=""/></form>
- type不同时有不同的作用
 - button配合JavaScript处理表单
 - reset清除表单信息
 - submit提交表单

文件域

1	<form action="" enctype="multipart/formdata"> <input type="file" name="fileName"></form>

下拉列表

1	<form> <select name="名称" size="1" multiple> <option value="1" selected>内容1 <option value="2">内容2 </select></form>

文本区

1	<form> <textarea name="" cols="" rows=""></textarea></form>

HTML文字

常用文字修饰标签

之间表示一个段落
表示粗体
表示斜体
表示下划线
之间文字为斜体,强调用
之间文字为黑体,非常重要
组合行内文字,便于css修改样式
<abbr title=""></abbr>表示缩略语
<address></address>表示联系方表示式
表示上标,表示下标
<pre></pre>用于保留空白字符,<code></code>用于表示代码
<time datetime="2016-01-20"></time>表示日期

常用格式修饰标签

内联无语义标签,<div>块间无语义标签
 换行符
<hr>水平分割线
之间是html的注释

字符实体引用

用于生成哪些键盘上没有的印刷字符,以&开头,以;结尾,常用的字符实体引用如下

字符	等价字符引用&entity_name;	等价字符引用&#number;
&	`&`	`&`
>	`>`	`>`
<	`<`	`<`
"	`"`	`"`
空格	` `	``