一、HTML基础_html-js-css

概述一、HTML简介 1、HTML概述（1）HTML 超文本标记语言纯文本：只有文字超文本：除了文字，还有图片、视频标记：HTML根据标签解析并展示页面（2）HTML后缀 html或者htm（htm是因为早期的 *** 作系统只支持3位扩展名才有的） 2、一个最基本的HTML页面 <html> <head> <meta charset="UTF-8">

一、HTML简介

1、HTML概述

（1）HTML 超文本标记语言

纯文本：只有文字

超文本：除了文字，还有图片、视频

标记：HTML根据标签解析并展示页面

（2）HTML后缀

HTML或者htm（htm是因为早期的 *** 作系统只支持3位扩展名才有的）

2、一个最基本的HTML页面

<HTML>    <head>        <Meta charset="UTF-8">        <Title>网页标题</Title>    </head>    <body>        <p>网正文页</p>    </body></HTML>

3、标签用来描述网页，大小写都可以

结构：<标签名>标签内容</标签名>

<标签名/>这是自结束标签

说明：由于HTML语法不是非常的严格，所以自结束标签中的/可不写

4、元素（一个完整的标签称之为元素）

元素=标签

5、属性

6、注释

注释中的内容不会在网页中显示

格式：

注释不能嵌套

7、鼠标右键（查看原件代码）

二、常用标签

1、<HTML></HTML>

作用：告诉浏览器，文档使用HTML编写

用法：所有网页的内容都要编写到HTML标签中；一个页面中HTML标签只能有一个；HTML标签中有两个子标签head和body

2、<head></head>

作用：<head>标签中内容不会在网页中直接显示，head中包含了浏览器和搜索引擎中其他不可见信息

用法：head标签作为HTML标签的子元素的出现，一个网页中只能有一个head

3、<Title></Title>

作用：<Title>标签表示网页的标题，一般会在网页的标题栏上显示

4、<body></body>

作用：网页的主题（页面中能看到的内容都应该编写到body标签中）

5、<p></p>

作用：表示网页中的一个段落；段落会在页面中自成一行

6、<h1>~<h6>

作用：h1~h6都是网页中的标题标签，用来表示网页中的一个标题（h1最大，h6最小）

7、<br/>

作用：换行

注意：在HTML中，字符中写再多空格，浏览器也会当成一个空格解析；人为换行（按键盘上的enter），也会当成一个空格解析

8、<img/>

作用：显示图片

属性：src---->指向一个外部的图片的路径

wIDth---->设置图片宽度，一般使用px作为单位

height---->设置图片高度，一般使用px作为单位（px---->像素）

alt---->图片不能显示时，对图片的描述

Title---->鼠标移动到图片上时，对图片的描述

9、相对路径和绝对路径

（1）相对路径：相对于当前资源所在的路径

图片和HTML文件在同一个文件夹

图片在HTML文件的下一层目录

图片在HTML文件在上一层目录

（2）绝对路径（不要使用此种方式）

10、<a>

作用：超链接，跳转到其他页面

href：指向一个链接地址

target：设置打开页面的位置（_self当前窗口；_blank新窗口）

11、列表

（1）无序列表<ul>

（2）有序列表<ol>

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>网页标题</Title>    </head>    <body>        <img src="libai.jpg" wIDth="100px" height="100px" alt="这是李白的图片 " Title="我是李白"/>         <img src="img/libai2.jpg" wIDth="100px" height="100px" />        <img src="../libai3.jpg" wIDth="100px" height="100px" />        <p>            <h1>静夜思</h1>            [唐] 李白<br />            床前明月光，疑是地上霜。<br />            举头望明月，低头思故乡。<br />                        <h3>望庐山瀑布</h3>            [唐] 李白<br />            日照香炉生紫烟，遥看瀑布挂前川。<br />            飞流直下三千尺，疑是银河落九天。<br />                        <ol>                <li><a href="http://www.shicimingju.com/chaxun/zuozhe/1.HTML" target="_self">李白的诗</a></li>                <li><a href="http://www.shicimingju.com/chaxun/zuozhe/6.HTML" target="_blank">王维的诗</a></li>                <li><a href="http://www.shicimingju.com/chaxun/zuozhe/8.HTML"><img src="baijuyi.jpg" wIDth="100px" height="100px"/></a></li>            </ol>                    </p>    </body></HTML>

三、表单<form></form>

1、文本框：text

2、密码框：passwd

3、提交按钮：submit

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>登录页面</Title>    </head>    <body>        <form>            用户名：<input type="text" /><br />            密码：<input type="password" /><br />            <input type="submit" value="提交" />        </form>    </body></HTML>

4、单选按钮：radio

5、多选框：checkBox

6、下拉列表：select

7、多行文本框：textarea

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>表单</Title>    </head>    <body>        <form>            用户名：<input type="text" /><br />            密码：<input type="password" /><br />            性别：            <input type="radio" name="sex" />男            <input type="radio" name="sex" />女            <input type="radio" name="sex" />保密            <br />            爱好：            <input type="checkBox" />乒乓球            <input type="checkBox" />羽毛球            <input type="checkBox" />足球            <br />            城市：            <select>                <option>北京</option>                <option>杭州</option>                <option>上海</option>                <option>南京</option>            </select>            <br />            备注：            <textarea rows="10" cols="20"></textarea>            <br />            <input type="submit" value="提交" />        </form>    </body></HTML>

四、表格<table></table>

1、行：tr

2、列：td

3、边框border

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>表格</Title>    </head>    <body>        <form>            <table border="1px">                <tr>                    <td>用户名：</td>                    <td><input type="text" /></td>                </tr>                <tr>                    <td>密码：</td>                    <td><input type="password" /></td>                </tr>                <tr>                    <td><input type="submit" value="提交" /></td>                </tr>            </table>        </form>    </body></HTML>

五、框架<frameset></frameset>

作用：使一个窗口里能同时显示多个文档，主框架页里面没有<body>标签，取代它的是<frameset>（框架可嵌套）

1、垂直框架

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>垂直框架</Title>    </head>    <frameset cols="30%,40%,30%">        <frame src="test.HTML" />        <frame src="test1.HTML" />        <frame src="test2.HTML" />    </frameset></HTML>

2、水平框架

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>水平框架</Title>    </head>    <frameset rows="30%,30%">        <frame src="test.HTML" />        <frame src="test1.HTML" />        <frame src="test2.HTML" />    </frameset></HTML>

3、混合框架

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>混合框架</Title>    </head>    <frameset rows="20%,80%">        <frame src="test.HTML" />        <frameset cols="50%,50%">            <frame src="test1.HTML" />            <frame src="test2.HTML" />        </frameset>            </frameset></HTML>

4、导航

作用：可以将test1的文档在test2所在的窗口显示。

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>混合框架</Title>    </head>    <frameset rows="20%,50%">            <frame src="test1.HTML" />            <frame src="test2.HTML" name="showframe"/>        </frameset>            </frameset></HTML>

还要修改test1.HTML

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="UTF-8">        <Title>网页标题</Title>    </head>    <body>        <img src="libai.jpg" wIDth="100px" height="100px" alt="这是李白的图片 " Title="我是李白"/>         <img src="img/libai2.jpg" wIDth="100px" height="100px" />        <img src="../libai3.jpg" wIDth="100px" height="100px" />        <p>            <h1>静夜思</h1>            [唐] 李白<br />            床前明月光，疑是地上霜。<br />            举头望明月，低头思故乡。<br />                        <h3>望庐山瀑布</h3>            [唐] 李白<br />            日照香炉生紫烟，遥看瀑布挂前川。<br />            飞流直下三千尺，疑是银河落九天。<br />                        <ol>                <li><a href="http://www.shicimingju.com/chaxun/zuozhe/1.HTML" target="showframe">李白的诗</a></li>                <li><a href="http://www.shicimingju.com/chaxun/zuozhe/6.HTML" target="showframe">王维的诗</a></li>                <li><a href="http://www.shicimingju.com/chaxun/zuozhe/8.HTML" target="showframe"><img src="baijuyi.jpg" wIDth="100px" height="100px"/></a></li>            </ol>                    </p>    </body></HTML>