1、HTML快速简单复习

头信息

<html>
<!-- 头信息的作用
    1. 可以设置网页的标题。
    2. 可以通知浏览使用指定的码表解释html页面.

 -->
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>这个是我的第一个网页</title>
        <meta name="keywords" content="java培训,php培训,C#培训,羊肉、狗肉、猪肉"/><!--一个网页的关键字最好是3-4个。 seo(搜索引擎优化)                          -->
    </head>

    <!-- 网页的内容应该写在body标签体内的。 -->
    <body>
        今天天气不错...
    </body>
</html>

常用标签

html常用的标签:
    <h1>~<h6> 表示是一个标题
    <p>   段落标签
    <hr/>  水平线标签
    <br/>  换行标签
    <sub>  下标
    <sup>  上标
    <pre>  原样标签: 原样标签会保留空格和换行符。
    <ol> <li> 有序的列表标签、
    <ul> <li> 无序的列表标签。
    项目列表标签(dl dt dd)
    行内标签(span)     
    块标签<div>    div标签的内容会独立占一行。



html的标签作用:用于描述一个网页的结构的。

如果需要操作数据的样式:通过标签的属性操作的。 

标签的类型: 
    1. 有开始标签与结束标签。  <p> </p>  需要把网页的数据内容封装到标签中。
    2. 开始标签与结束标签都是在一个标签体内的。  比如: <hr/>    功能单一不需要封装数据到标签中。

实体标签

<!-- 
为什么要学实体标签:
    因为> < 等一些符号在html页面中是有着特殊含义,这些字符如果需要在页面中显示,这时候就应该使用实体标签。


常用的实体字符: 
    空格      &nbsp;
    小于号     &lt;
    大于号    &gt;
-----------------------------
    人民币    &yen;
    版权      &copy;
    商标      &reg;
-->

媒体标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!-- 
媒体标签:
    <embed></embed>  
        hidden : 设置隐藏插件是否隐藏。
        src :用于指定音乐的路径

   <embed src="1.mp3" ></embed>

   <marquee> 飘动标签
        direction : 指定飘动的方向
        scrollamount : 指定飘动的速度。
        loop   :指定飘动的次数

    -->

   <marquee  loop="-1" scrollamount="30" direction="right"><font size="+6" color="red"> 我飞起来了...</font></marquee>

<body>
</body>
</html>

超链接

<!-- 
 <a> 超链接标签

 a标签常用的属性:
    href  : 用于指定链接的资源
    target: 设置打开新资源的目标。    _Blank 在独立的窗口上打开新资源   _self 在当前窗口打开新资源 

file: file协议(文件协议)这种协议主要是用于搜索本地机器的资源文件的。

格式:
    file:\\\f:\美女\1.jpg    

a标签的原理:
    1. a标签的href属性值如果是以http开头的,那么浏览器会马上启动http解释器去解释该网址,首先
    会在本地机器去找一个hosts文件, 如果在hosts文件上该域名没有对应的主机,那么浏览器就去到对应的
    dns服务器去寻找该域名对应的主机号。如果找到了对应的主机,那么该请求就会发给对应的主机。


    2. 如果a标签的href属性值没有以任何协议开头,那么浏览就会启动file协议解释器去解释该资源路径。

    3. 如果a标签的href属性值并不是以http开始,而且其他 的一些协议,那么这时候浏览器就回去到我们本地的注册
    表中去查找是否有处理这种协议 的应用程序,如果有,那么马上启动该应用程序处理该协议。

邮件 的协议: mailTo
迅雷的协议: thunder

 超链接标签的作用:
    1. 可以用于链接资源。
    2. 锚点点位.  
        1. 首先编写一个锚点  锚点的格式: <a name="锚点名字"> 数据</a>
        2. 使用a标签 的herf属性连接到锚点出。  href=”#锚点的名字“    

-->

图片

<!--
<img>图片标签:

img标签常用的属性:
    width: 设置图片宽度
    height  设置图片高度    
    alt:    如果图片资源无法找到,那么就显示对应的文字对图片进行说明。

热点图:


-->

table

<!--
<table>表格标签

表格使用到的标签:
    <table> 表格
    <tr>    行
    <td>    单元格
    <th>     表头   默认的样式是居中,加粗。
    <caption>  表格的标题


表格常用的属性:
    border  设置表格的边框 
    width : 设置表格的宽度
    height: 设置表格的高度的。
    colspan: 设置单元格占据指定的列数。
    rowspan : 设置单元格占据指定的行数。

-->

一个表格案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <table border="1px" align="center" width="400px" height="300px">
        <tr>    
            <th colspan="3">学生成绩</th>
        </tr>

        <tr>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>

        <tr>
            <td>数学</td>
            <td>95</td>
        </tr>

         <tr>
            <td rowspan="2">李四</td>
            <td>语文</td>
            <td>88</td>
        </tr>

        <tr>
            <td>数学</td>
            <td>91</td>
        </tr>
    </table>

</body>
</html>

一个表单案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 
表单标签: 表单标签的作用是用于提交数据给服务器的。

    表单标签的根标签是<form>标签

常用的属性:
    action: 该属性是用于指定提交数据的地址。
    method: 指定表单的提交方式。
            get : 默认使用的提交方式。  提交的数据会显示在地址栏上。
            post :  提交的数据不会显示在地址栏上。




注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值。





-->
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <!-- 文本输入框 单行-->
        用户名:<input name="userName" type="text"/><br/>
        <!-- 密码框 -->
        密码:<input name="password" type="password"/><br/>
        <!-- 单选框  -->
        性别: 男<input checked="true" value="man"  name="sex" type="radio"/><input name="sex" value="woman" type="radio"/><br/>
        <!-- 下拉框 -->
        来自的城市:<select name="city">  
                    <option value="BJ">北京</option>
                    <option value="SH">上海</option>
                    <option value="GZ">广州</option>
                    <option value="SZ">深圳</option>
                </select><br/>
        <!-- 复选框  同一组的复选框name的属性值要一致 -->
       兴趣爱好:java <input value="java" name="hobit"  checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /><br/>
       <!-- 文件上传框-->
        大头照:<input name="image" type="file" /><br/>
        个人简介:
        <!-- 文本域 -->
        <textarea  name="intro" rows="10" cols="30"></textarea><br/>

        <!-- 提交按钮 -->
        <input type="submit" value="注册"/>
        <!--  重置按钮 -->
        <input type="reset" value="重置"/>

    </form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值