html基础

网站的概述

网页概述

  • 网页: 一个纯文本格式文件,可通过文本编辑器编辑(使用html语言编辑)
  • 网站: 多个网页的集合
  • 主页: 打开网站后显示的第一个页面
  • 浏览器: 起解析翻译作用

网页术语

  • 域名: 浏览网页时输入的地址(通过DNS服务器解析为IP地址)
  • IP地址: 标识网络中的主机
  • HTTP: 超文本传输协议
  • FTP: 文件传输协议(可上传及下载文件)
  • URL: 统一资源定位符,万维网寻址系统
  • HTML: 超文本标记语言
  • 网站发布: 上线发布访问

制作第一个网页

首先创建文件 html_study01.html
使用 Sublime Text 自动补齐功能打出以下代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>
  • 第一行 <!DOCTYPE html> 文本类型为 html 类型
  • <html> 表示开始,</html> 表示结束
  • <head>...</head> 网页头部部分,常加入标签 <meta charset="utf-8"> 支持中文
  • <title></title> 填写网页标题栏的标题
  • <body>...</body> 网页主体部分

编辑如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>Hello,World!</h1>
    <h2>这是我的第一个网页</h2>
    <h3>欢迎大家</h3>
    <h4>欢迎大家</h4>
    <h5>欢迎大家</h5>
    <h6>欢迎大家</h6>
</body>
</html>

HTML超文本标记语言

HTML 文件基本结构

  • HTML: <html> HTML文档 </html>
  • 头部: <head> 显示在网页标题栏的标题 </head>
  • 主体: <body> 文本/图像/视频等 </body>

HTML标签

  • 由尖括号包括
  • 成对出现
  • 第一个标签是开始标签,第二个是结束标签
  • 开始标签 == 开放标签
  • 结束标签 == 闭合标签

HTML编辑器

  • Notepad
  • Notepad++
  • Sublime Text3

HTML基本标签

标签

  • 标题 <h1></h1>---<h6></h6>
  • 段落 <p></p>
  • 链接 <a></a>
  • 图像 <img></img>
  • 换行 <br></br>
  • 居中 <center></center>
  • 水平线 <hr></hr>
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test 02</title>
</head>
<body>
    <h1>This is my html!</h1>
    <p>How are you?</p>
    <p>Hello,World!</p>
    <h2>点击访问百度新闻</h2>
    <a href="http://news.baidu.com" >新闻</a>
    <h2>点击访问</h2>
    <a href="http://www.ztyangjoy.cn">南玖</a>
    <h2>查看图片</h2>
    <img src="http://myalbum.cn-bj.ufileos.com/%E9%9A%8F%E6%8B%8Dp3.jpg" width="500" height="300"/>
</body>
</html>

HTML元素与属性

元素

HTML<font color="red">元素指从开始标签到结束标签中的所有内容

属性

<font color="red">属性以键值对形式出现在HTML的开始标签中

  • <body bgcolor="red"> 设置背景颜色
  • <h1 align="cener"> 设置标题居中显示

HTML列表

无序列表

是一个项目的列表,列表使用<ul></ul> 标签,列表项使用 <li></li> 标签,默认使用实心圆形黑点表示

实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html list</title>
</head>
<body>
    <h2>这是一个无序列表</h2>
    <ul>
        <li>hello</li>
        <li>world</li>
    </ul>
    <h2>这是另外一个列表</h2>
    <ul type="circle"> #空心圆形
        <li>你好</li>
        <li>世界</li>
    </ul>
    <h2>这又是另外一个列表</h2>
    <ul type="square"> #实心矩形
        <li>你好</li>
        <li>世界</li>
    </ul>
</body>
</html>

列表项内部可以使用图片或其他标签

有序列表

有序列表也具有列表项,但是有序号

列表使用<ol></ol> 标签,列表项使用 <li></li> 标签,默认以数字排序

实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html list</title>
</head>
<body>
    <h2>这是一个有序列表</h2>
    <ol>
        <li>hello</li>
        <li>world</li>
    </ol>
    <h2>这是另外一个列表</h2>
    <ol type="A"> #大写字母排序
        <li>你好</li>
        <li>世界</li>
    </ol>
    <h2>这又是另外一个列表</h2>
    <ol type="a"> #小写字母排序
        <li>你好</li>
        <li>世界</li>
        <li>你好</li>
        <li>世界</li>
    </ol>
    <h2>这又是另外一个列表</h2>
    <ol type="I"> #大写罗马数字排序
        <li>你好</li>
        <li>世界</li>
    </ol>
    <h2>这又是另外一个列表</h2>
    <ol type="i"> #小写罗马数字排序
        <li>你好</li>
        <li>世界</li>
    </ol>
</body>
</html>

定义列表

不仅仅是一列项目,而是项目+注释,所用标签<dl></dl> <dt></dt> <dd></dd>

注释格式: <!-- 注释内容 -->

实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html list</title>
</head>
<body>
    <dl>
        <dt>咖啡</dt>
        <dd>牛奶</dd>
    </dl>
    <dl>
        <dt>HTML无序列表</dt>
        <dd>默认实心圆点</dd>
    </dl>
    <dl>
        <dt>HTML有序列表</dt>
        <dd>默认数字</dd>
    </dl>
</body>
</html>

HTML图像标记

<img> 是一个单标记

属性

  • src 设置图片位置和格式
  • width 设置图片宽度
  • height 设置图片高度
  • border 设置图片边框宽度
  • alt

    • 图像加载失败,使用文字代替图片显示
    • 使搜索引擎通过文字搜索到此图片
  • title

    • 图片加载完成后,鼠标移动到图片上时,出现定义的文字

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>image test</title>
</head>
<body>
     <center>
         <h2>随拍01</h2>
         <img src="http://myalbum.cn-bj.ufileos.com/%E9%9A%8F%E6%8B%8Dp3.jpg" width="600px" height="400px"/>
         <h2>随拍02</h2>
         <img src="http://myalbum.cn-bj.ufileos.com/%E9%9A%8F%E6%8B%8Dp2.jpg" width="600px" height="400px" border="10px" />
         <h2>随拍03</h2>
         <img src="http://myalbum.cn-bj.ufileos.com/p1.png" width="600px" height="400px" title="下雪了" />
     </center>
</body>
</html> 

HTML超链接

基本语法

<a href="" target="" name="" >test</a>

属性

  • href 链接地址
  • target 打开方式

    • _blank 新窗口打开
    • _seif 默认值,在当前窗口打开
    • _parent 在父窗口打开
    • _top 在顶层窗口打开
  • name 页面锚点名称
实例
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>href test</title>
</head>
<body>
    <center>
        <h1>超链接测试</h1>
    </center>
    <h2>默认当前窗口打开</h2>
    <a href="http://www.baidu.com" name="baidu">百度</a>
    <h2>新窗口打开</h2>
    <a href="http://www.baidu.com" name="baidu" target="_blank" >百度</a>
    <h2>父窗口打开</h2>
    <a href="http://www.baidu.com" name="baidu" target="_parent">百度</a>
    <h2>顶层窗口打开</h2>
    <a href="http://www.baidu.com" name="baidu" target="_top">百度</a>
</body>
</html>

HTML表格

关于表格

  • 组成:元素、行、列、单元格
  • 显示分类数据
  • 页面布局定位
  • 完整表格格式

    • <table>
    • <tr></tr>
    • <td></td>
    • </table>

为什么使用表格?
1.简单通用
2.结构稳定

表格基本结构

  • 表格是由指定数目的行和列组成
  • 文字和图片按照应的行或列进行分类
  • 单元格:表格的最小单位
  • 行:多个横向单元格组成
  • 列:多个纵向单元格组成

表格的基本用法

  • <table></table> 表名和表格本身内容的代码,属性 border 定义表格的单元格和结构,指定边框厚度
  • <tr></tr> 表格行,多行组成表格,每行各使用一个 <tr></tr>
  • <td></td> 表格列,嵌套于 <tr></tr>
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table test</title>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>89</td>
            <td>85</td>
            <td>91</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>87</td>
            <td>90</td>
            <td>82</td>
        </tr>
    </table>
</body>
</html>

HTML跨列表格

单元格的横向合并,colspan=”所跨的列数”

实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table test</title>
</head>
<body>
    <table width="400" border="1">
        <tr>
            <td colspan="2">学生成绩表</td>
        </tr>
        <tr>
            <td>科目</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>88</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>98</td>
        </tr>
    </table>
</body>
</html>

HTML跨行表格

单元格垂直方向合并,rowspan=”所跨的行数”

实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>rtable test</title>
</head>
<body>
    <center>
        <table width="800" border="1">
        <tr bgcolor="#6495ED">
            <td align="center">学生</td>
            <td align="center">科目</td>
            <td align="center">成绩</td>
        </tr>
        <tr>
            <td rowspan="2" align="center">张三</td>
            <td align="center">HTML</td>
            <td align="center">96</td>
        </tr>
        <tr>
            <td align="center">PHP</td>
            <td align="center">95</td>
        </tr>
        <tr>
            <td rowspan="2" align="center">李四</td>
            <td align="center">python</td>
            <td align="center">89</td>
        </tr>
        <tr>
            <td align="center">Linux</td>
            <td align="center">96</td>
        </tr>
    </table>
    </center>
</body>
</html>

HTML表格布局

  • 填充:
  • 间距
  • 属性cellpadding

    • 文字与边框的距离
  • 属性cellspacing

    • 表格内框间的距离
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
</head>
<body>
    <table border="2" cellpadding="30" cellspacing="40">
        <tr>
            <td colspan="4">家用电器</td>
        </tr>
        <tr>
            <td colspan="2">生活用品</td>
        </tr>
        <tr>
            <td colspan="2">办公设备</td>
        </tr>
        <tr>
            <td>华为</td>
            <td>小米</td>
            <td>vivo</td>
            <td>oppo</td>
        </tr>
    </table>
</body>
</html>

HTML表格高级应用

对表格添加标题,对数据进行分组

  • <caption></caption> 表格标题
  • <th></th> 表格的表头
  • <thead></thead> 对应报表页眉
  • <tbody></tbody> 报表的数据主体
  • <tfoot></tfoot> 对应报表页脚
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table test</title>
</head>
<body>
    <table width="100%">
        <caption>收入报表</caption>
            <thead style="background: #6495ED">
                <tr>
                    <td>月份</td>
                    <td>收入(RMB)</td>
                </tr>
            </thead>
            <tbody style="background: #F0E68C">
                <tr>
                    <td>1月</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>2月</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>3月</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>4月</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>5月</td>
                    <td>10000</td>
                </tr>
                <tr>
                    <td>6月</td>
                    <td>10000</td>
                </tr>
            </tbody>
            <tfoot style="background: #5F9EA0">
                <tr>
                    <td>平均月收入</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td>总输入</td>
                    <td>6000</td>
                </tr>
            </tfoot>
    </table>
</body>
</html>

HTML表单

表单概述

  • 主要是收集客户端的信息,使网站具有交互功能
  • 表单元素

    • 单行文本框
    • 密码框
    • 单选按钮
    • 复选框
    • 下拉列表框
    • 多行文本域
    • 提交按钮

表单的基本语法

  • <form>各种表单元素</form>
  • 属性 action=”表单提交地址” 处理表单的服务器地址,不填默认为当前页面
  • 属性 method=”提交方式” GET POST
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单测试</title>
</head>
<center>
    <body>
    <form action="login.jsp" method="post">
        <p>用户名:<input type="text" name="Usrname" size="20" maxlength="10" /></p>
        <p>密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="password" size="20" /></p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="btn" value="提交" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="重置" /></p>
    </form>
</body>
</center>
</html>

表单元素

<input type="" name=""> 属性

  • name=”元素名称”
  • type=”类型” text/password/checkbox(复选框)/radio(单选按钮)/submit(提交)/reset/file/image/button 默认text
  • value=”值” 初始值
  • size=”显示宽度” 初始宽度 text与password以字符为单位,其他以px为单位
  • maxlength=”最大字符长度” 默认不限制
  • checked=”是否选中” 指定按钮或复选框是否被选中

元素

  • 文本框:type=”text”,最常用的表单输入元素,输入单行文本信息,如用户名/邮箱/手机号
  • 密码框:type=”password”,输入的字符以加密形式显示,提高数据安全性
  • 单选按钮:type=”radio”,用于相互排斥的值
  • 复选框:type=”checkbox”,可以选择多个选项
  • 下拉列表:标签<select>显示选项</select> <option>每个选项</option>,下拉列表至少包含一个<option></option>标签
  • 多行文本域:标签<textarea></textarea>
  • 文件域: type=”file”,上传文件
实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单测试</title>
</head>
<body>
    <center>
        <h2>表单文本框测试</h2>
        <form name="form1" method="post" action="">
            <p>姓名:<input type="text" name="text1" value="张三" size="20" /></p>
            <p>地址:<input type="text" name="text2" value="北京" size="20" /></p>
        </form>
        <h2>密码框测试</h2>
        <form name="form2" method="post" action="">
            <p>密码:<input type="password" name="pw1" size="20"></p>
        </form>
        <h2>单选按钮测试</h2>
        <form name="form3" method="post" action="">
            <p>男<input type="radio" name="nan" /></p>
            <p>女<input type="radio" name="nv" /></p>
        </form>
        <h2>复选框测试</h2>
        <form name="form4" method="post" action="">
            <input type="checkbox" name="checkbox1" value="sports" />运动&nbsp;&nbsp;
            <input type="checkbox" name="checkbox2" value="talk" checked="checked" />聊天&nbsp;&nbsp;
            <input type="checkbox" name="checkbox3" value="read" />读书&nbsp;&nbsp;
        </form>
        <!--<h2>下拉列表测试</h2>
        <select name="列表名" size="行数">
            <option value="可选项值" selected="是否默认选中">123</option>
        </select>-->
        <h2>下拉列表测试</h2>
        <form name="form5" method="post" action="">
            <p>出生日期:
            <input type="texr" name="text3" value="yyy" size="5" maxlength="4" />年&nbsp;
            <select name="mon">
                <option value="" selected="selected">选择月份</option>
                    <option value="0">一月</option>
                    <option value="1">二月</option>
                    <option value="2">三月</option>
                    <option value="3">四月</option>
            </select>
            <select name="day">
                <option value="" selected="selected">选择日</option>
                    <option value="0">1</option>
                    <option value="1">2</option>
                    <option value="2">3</option>
                    <option value="3">4</option>
            </select>
            </p>
        </form>
        <h2>文件域测试</h2>
        <form name="form6" method="post" action="" enctype="multipart/from-data">
            <p>请选择你要上传的文件:<input type="file" name="files"><br><input type="submit" name="upload" value="上传" /></p>
        </form>
    </center>
</body>
</html>

<input> 标签的使用

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发

请登录后发表评论