<!DOCTYPE html> 声明html的语言版本
 <html>是网页的根标签,所有的内容都写在此标签中  作为标记语言必须有一个根标签
    <head>
        <meta charset="utf-8" />设置网页的字符集
        <title></title>设置网页的标题
    </head>
    <body>
        
    </body>
 </html>

< html >…< /html > 标签标记 HTML 文档的开始和结束 < head >…< /head > 标签包括标题和其他说明信息。头部部分 < body >…< /body > 标签包含文本、图像和链接。主体部分

头部区域

Head标签(标签)包含了所有的头部标签标签。头部区域的标签标签为: < title >, < style >, < meta >, < link >, < script >, < base >.

< title >标签可定义网页的标题

< meta > 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

< meta > 标签位于文档的头部

< meta charset="utf-8" />设置网页的字符集

< meta name=“keywords” content=“手机,家电" >

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

< meta name="author" content=“jim" >

标题处添加图标 < link rel="icon" href="ico地址">

注释

< !-- 注释内容-- > 快捷键ctrl+shift+/

标签属性

标签的特性,通过设置属性来设置标签的表现形式

属性必须写在开始标签或者自闭和标签中

标签可以有多个属性

属性语法:属性名="属性值"

常用标签

标题标签

只有六级标题

< h1>< /h1>一级标题

< h2>< /h2>二级标题

< h3>< /h3>三级标题

< h4>< /h4>四级标题

< h5>< /h5>五级标题

< h6>< /h6>六级标题

属性:align 属性值有left,right,center设置标题的对齐方式

段落标签

< p>段落文本< /p>标签内的文本表示一段文字

< br />换行标签

列表标签

< ol>< /ol>有序列表标签,列表项前会有数字进行排序表示一个区域

属性:type 属性值可以改变序号的规则例如A,Ⅰ,1等

< ul>< /ul>无序列表标签,列表项前有图标标记表示一个区域

< li>< /li>列表项标签,写在上面两个标签中,表示列表中的一项表示一行的区域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /><!-- 设置网页的字符集 -->
        <title>百度</title><!-- 设置网页的标题 -->
        <link href="img/baidu.ico" rel="icon"><!-- 设置标题处的图标,rel指明文件的类型 -->
    </head>
    <body>
        body标签是网页的身体,网页的所有内容都写在此标签中
        
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        
        <p>
            body标签是网页的身体,网页的所有内容都写在此标签中 <br/>
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
        </p>
        <p>
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
        </p>
        <p>
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
        </p>
        
        <ol> <!-- 有序列表-->
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ol>
        
        <ul> <!-- 无序列表-->
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </body>
</html>

超链接标签

< a>< /a>标签表示一个超链接

网页中通过超链接与网络上的另一个文档相连

语法格式:

< a href="url" target="文档打开方式对应的值">< /a>

href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址) URL(Uniform Resource Locator)统一资源定位符

target的属性值:_blank 在新窗口打开链接地址,默认是当前的窗口

    <body>  
         <a href="http://www.baidu.com" target="_blank">百度</a>       
    </body>

超链接锚点

超链接的一种形式

一般用于导航栏的设置可以直接定位到网页中的一处"锚点"处

 <a name="top"></a>
        <a href="#p1">图片1</a>
        <a href="#p2">图片2</a>
        <a href="#p3">图片3</a>
        <a href="#p4">图片4</a>
        <a href="#p5">图片5</a>
        
        <h3><a name="p1">图片1</a></h3>
        <img src="img/1.png"/>
        
        <h3><a name="p2">图片2</a></h3>
        <img src="img/2.png"/>
        
        <h3><a name="p3">图片3</a></h3>
        <img src="img/3.png"/>
        
        <h3><a name="p4">图片4</a></h3>
        <img src="img/4.png"/>
        
        <h3><a name="p5">图片5</a></h3>
        <img src="img/5.png"/>
        <a href="#top">返回顶端</a>

图像标签

< img src=“url”>< /img>

属性:width,hegiht设置图像的宽和高 border设置图像的边框

图片标签并不是将图表保存到网页中去,而是引用图片的地址图片标签可以写在超链接标签中将图表设置为超链接

<a href="http://www.hao123.com" target="_blank">
    <img src="img/hao123.png"/>
</a>

特殊符号转义

HTMl中预留了一些字符,这些字符是不能直接在网页中使用ed

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。例如：< b > 会被解析为b标签，空格,再多的空格都会当一个空格处理。为了可以使用这些预留字符，我们必须在html中使用字符转义。

& lt;与& gt;表示小于和大于符 & nbsp;表示空格符

& reg;注册商标符号 & copy;注册版权符号 & trade;临时商标符号

表格

表格中不仅可以存放数据,早期的表格可以用来网页布局(已淘汰)

表格用一组标签表示分别是

table表格 tr表格的行 th表格的单元格(表头) 内容会默认加粗居中 td表格的单元格(普通) 表格中的数据都是写在单元格中

表格的基本结构

< table>定义表格 < tr>定义表行 < th>定义表头< /th> < /tr> < tr> < td>定义单元格< /td> < /tr> < /table>

表格的属性

border 边界值 background 背景图片 bgclolor 背景颜色

width与hright设置单元格的宽和高(表格的大小默认是由内容决定的)

align 属性值有left,right,center 设置单元格水平对齐的方式

valign 属性值有top,bottom,middle 设置单元垂直对齐的方式

cellpadding 设置单元格内容到边框之间的距离

cellspacing 设置单元格之间的距离单元格的距离默认为2

 <table border="1"  width="500" height="200" cellpadding="10" cellspacing="0" >
            <tr bgcolor="grey">
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>物理</th>
            </tr>
            <tr align="right">
                <td>99</td>
                <td>88</td>
                <td>77</td>
                <td>66</td>
            </tr>
            <tr align="center">
                <td valign="bottom">99</td>
                <td valign="top">88</td>
                <td>77</td>
                <td>66</td>
            </tr>
            <tr>
                <td>99</td>
                <td>88</td>
                <td>77</td>
                <td>66</td>
            </tr>
        </table>

表格的合并

表格生成的快捷键 table>trn>tdn 按下tab键可以直接生成n行n列的表格

合并单元格通过单元格的属性

colspan="n" 可以使当前单元格跨列表示n个单元格(合并一行中n个单元格) rowspan="n" 可以使当前单元格跨行表示n个单元格(合并一列中n个单元格)

注意上两个属性时表示n个单元格,所以在使用时要注意删除多余的单元格

<table border="1" width="500" height="200">
            <tr>
                <td></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
         </table>

表单

表单中有许多输入式或选择式的组件,用户可以在表单中输入信息,最终将表单中的信息提交到服务器中 form标签 < form>< /form>表示一个表单

属性 action="服务器的地址" method="http请求提交数据的方式"

表单中的组件

表单中的组件不会自动换行

输入式组件

< input type="text"/> 单行文本输入框

属性值:name文本框的名称 value值 disable="disable"设置为禁用禁用组件后不会再向服务器提交数据 readonly="readonly"设置为只读还可以像服务器提交数据 placeholder 设置提示信息

< textarea>< /textarea> 多行文本域

属性值 name设置名称 cols与rows设置列数与行数文本域的值写在标签中而不写在value中

选择性组件

选择性组件都需要设置value值 < input type="radio"/>单选钮组件单选钮组件必须要设置name值进行分组

属性值checked="checked"设置为默认选中

< input type="checkbox"/>多选框(复选框)组件多选框(复选框)组件也需要设置name值进行分组

属性值checked="checked"设置为默认选中

< select>< /select>下拉列表组件

name值写在select标签中

value值写在option标签中

< input type="file"/>文件选择组件

按钮组件

value值设置按钮组件的显示的文本

< input type="submit">提交按钮,将表单的数据提交

< input type="reset"> 重置按钮使表单回到默认状态

< input type="button"> 普通按钮可以用于触发事件通过事件可以调用js函数

  <from>
             账号<input type="text" name="account" placeholder="请输入账号" disabled="disabled"/><br />
             密码<input type="text" name="password" placeholder="请输入密码"/><br />
             性别<input type="radio" name="gender" value="男" checked="checked"/>男<!-- 属性值checked="checked"设置为默认选中 -->
                 <input type="radio" name="gender" value="女"/>女<br />
             爱好<input type="checkbox" name="hobby" value="运动1"/ checked="checked">运动1<!-- 属性值checked="checked"设置为默认选中 -->
                 <input type="checkbox" name="hobby" value="运动2"/>运动2
                 <input type="checkbox" name="hobby" value="运动3"/>运动3
                 <input type="checkbox" name="hobby" value="运动4"/>运动4<br />
             
             省份<select name="shengfen"><!-- name值写在select标签中 -->
                 <option value="陕西">陕西</option>
                 <option value="四川">四川</option><!-- value值写在option标签中 -->
                 <option value="上海">上海</option>
             </select><br />
             
             上传图片:<input type="file"/><br />
             
             备注:<textarea name="tips" cols="10" rows="10">123</textarea><br /><!-- 属性值 name设置名称 cols与rows设置列数与行数 文本域的值写在标签中而不写在value中-->
             
             <input type="submit" value="登录" />
             <input type="reset" value="重置" />
             <input type="button" value="普通按钮" />
         </from>