HTML-初学

HTML负责骨架结构

关于HTML

写在<head>里面的通常是脚本（scripts）, 样式文件（CSS），及各种meta信息

头部！！！！

<link>标签通常用于链接到样式表:

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style>标签定义文档的样式文件引用地址。

<style type="text/css">

所有meta标签都显示在head部分，META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据

为搜索引擎定义关键词:

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

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http‐equiv="refresh" content="30">

———————————————————————————————————

写在<body>里面的是整个网页的内容。

内容！！！！

<h>标题<h/>
<p>小段落<p/>

1 . class 属性可以多用class=" "（引号里面可以填入多个class属性）

2 . id 属性只能单独设置 id=" "（只能填写一个，多个无效）

3 . style 规定元素的行内样式。直接写在html里不用在css中写。

<font size="5">这是5号字体文本</font>

<br> 是换行！！！！

<hr> 是在段落之后加横线（hr 元素可用于分隔内容）

超级链接！！！！

<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

加入超链接用 a标签的href title是悬停文本 target 是否在新窗口中打开目标

<iframe>标签可以在网页内容中浏览其他网页的内容。

其中可以设置可浏览范围的大小，weight/hight.

浏览其他网页可以进行更换

<iframe src="xx.com" name=" 123 "></iframe>
<p><a href="mm.com" target=" 123 ">mm.com</a></p>

图片！！！！

<img src="xx.jpg" alt="xx" width="258" height="39" />

插入图片是 img src 是自封型标签， alt是如果打不开图片显示的字

还可以定义宽高。

<map> 定义图像地图

<area> 定义图像地图中可点击的区域

<area shape="circle/rect" coords="124,58,8" alt="Venus" href="venus.htm">
//            （所选图形形状）        （像素点位置）   （备用名字）  （链接地址）

图形形状：圆形有三个位置点，正方形有四个位置点

背景图片

background:url(images/icons.png) no-repeat -108px 0;

框！！！！

以下框列表按钮都要在
<form>表单标签下书写

<input>标签有属性有 type name id

type是选择是什么类型的框
name是归类用于单选框和复选框（name在一类可以一样）
id是用来指定位置，相当于身份证号码。（没有重复的id）

文本框

<input type="text" />

密码框

<input type="password" />

单选框

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女

label标签可以解决单选框点字的时候有反应

（这个时候要记得加id）

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女< /label>

复选框

<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭
<input type="checkbox" name="aihao"/> 足球

label标签可以解决复选框点字的时候有反应

10天内免登陆

列表！！！！

下拉列表

<select>
<option>北京</option>
<option>山东</option>
<option>山西</option>
</select>

文本域

<textarea cols="30" rows="10"></textarea>

定义列表

<dl>
  <dt>第一个项目</dt>
  <dd>项目介绍</dd>
  <dt>第二个项目</dt>
  <dd>项目介绍</dd>
</dl>

按钮！！！！

普通按钮：

<input type="button" value="我是一个普通按钮" />

提交按钮：

<input type="submit" />

重置按钮：

<input type="reset" />

锁定目标！！！！

<a href="#cf">点我直接输密码</a>
       .....
<h3 id="cf">输入密码</h3>
<input type="password" value="输入密码" /><br>

表格！！！！

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义）

每行被分割为若干单元格（由 <td> 标签定义）

表格的表头使用 <th> 标签进行定义

<table border="1"> 边框为 1px        <table border="0">  无边框
     <tr>                                                <tr>
         <th>....</th>                                   <th>....</th>
         <th>....</th>                                   <td>.....</td>


     </tr>                                               </tr>
     <tr>       水平表格                       <tr>                   垂直表格
         <td>.....</td>                                   <th>....</th>
         <td>....</td>                                    <td>.....</td>
     </tr>                                               </tr>
</table>                                            </table>

表格可以跨多个格

//行跨两格
<th colspan="2">xxx</th>
//列跨两格
<th rowspan="2">xxx</th>

表格里可以放任何元素比如：图片列表表格等

内容布局分块！！！！

块级元素

块级元素在浏览器显示时，通常会以新行开始

实例: <h1>, <p>, <ul>, <table>

内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

<div>元素是块级元素，相当于一个容器

<span>是内联元素，也相当于一个文本的容器

<div>和<span>的使用将内容规划到每个小盒子，便于CSS进行渲染。