html学习指南---知识点大全

什么是html?

html是一种超文本标志性语言,html不区分大小写。

html重要的标签

  • 常用文本标签
<!--
    标签可以嵌套,但是不能你中有我,我中有你
    常用的 文本标签
        1 标题标签:是通过<h1>-<h6> 标签来定义的.数字越小,表示字体越大,级别越高
        2 超链接   <a  href="http://www.runoob.com"> 描述  </a>  链接的地址在 href 属性中指定
        3 段落标签  <p >段落内容</p>
        4 hr标签   显示一条水平现  <hr /> 注意 :字结束标签后面的斜杠可以不写  <hr >
            4.1  hr标签的属性 color  width(宽度)  size(高度) [align(对其方式)left right center]
        5 b标签   字体加粗  <b></b>
        6 i标签   字体斜体   <i></i>
        7 font标签  属性 :color  size  face(字体样式)
        8 center标签  让文本居中

   标签是可以嵌套的   同一标签的不同属性用空格隔开就可以-->
  • 图片标签
<!--
       常用的图片标签 展示一张图片
       <img  src="image/Capture001.png"/>
        1. 属性src指定图片的位置
            可以是相对位置  所谓相对路径就是相对于资源的路径  ./表示当前目录 ../表示父目录   也可以是绝对路径
        2. 属性 alt 指定图片的描述  如果图片加载失败了  就显示alt属性指定的描述内容
        3. 属性 宽 :width  高 :height  单位px  px :像素
 -->
  • 表格标签
 <!--
         表格常用标签 及其属性
            1 html的表格没有列的概念 只有行和单元格的概念
            2 标签 <table></table>  行标签 <tr></tr>   单元格标签<td></td>  表头标签<th></th>  表的标题<caption></caption>
            3 table的属性   3.1 border(规定单元格之间是否有边框)   3.3  cellspacing[属性值 1,0] 规定单元格之间的距离
                            3.2 width[属性值  可以是数值 单位像素  也可以是百分数 表示占body的百分之多少]
                            3.3 表格的背景色 【bgcolor】    3.4 表格对齐方式  【align】
            4  行标签tr 的属性     4.1 bgcolor 背景色   align 行的对其方式
            5 单元格标签td 的属性     5.1 bgcolor 背景色    align 单元格的对齐方式   colspan 合并列  rowspan 合并行
        -->

-超链接标签

   <!--
         超链接标签  <a ></a>
         属性  href :指向的访问资源的URL
               target 指定打开资源的方式  [_blank  在空白页面打开 ]   [_self  默认值 在当前页面打开 ]
        -->
  • 列表标签
 <!--
        有序列表 ol li
        无序列表 ul li  ul标签的属性  【type  三种  disc square circle 】三种不同的标志符号
    -->
        下周要做的事情
        <ol>
            <li>等待大数据比赛结果,完善博客</li>
            <li>把前端看完</li>
            <li>去进行人工智能</li>
        </ol>

        下周要做的事情
        <ul type="square">
            <li>等待大数据比赛结果,完善博客</li>
            <li>把前端看完</li>
            <li>去进行人工智能</li>
        </ul>
  • 表格标签
  <!--
         表格常用标签 及其属性
            1 html的表格没有列的概念 只有行和单元格的概念
            2 标签 <table></table>  行标签 <tr></tr>   单元格标签<td></td>  表头标签<th></th>  表的标题<caption></caption>
            3 table的属性   3.1 border(规定单元格之间是否有边框)   3.3  cellspacing[属性值 1,0] 规定单元格之间的距离
                            3.2 width[属性值  可以是数值 单位像素  也可以是百分数 表示占body的百分之多少]
                            3.3 表格的背景色 【bgcolor】    3.4 表格对齐方式  【align】
            4  行标签tr 的属性     4.1 bgcolor 背景色   align 行的对其方式
            5 单元格标签td 的属性     5.1 bgcolor 背景色    align 单元格的对齐方式   colspan 合并列  rowspan 合并行
        -->
  • 表单
<!--表单
      *概念:用于采集用户输入的数据,用于和服务器之间的交互
        *form:用于定义表单。可以定义一个范围,范围代表采集用户数据的范围,不在form标签里,就无法被采集提交
            属性:*action:用户提交数据的URL  action="#" 表示的是提交到当前界面
                  *method 数据提交的方式
                       *method分7类 最主要的两类
                            * get 1.表单的请求参数会在地址栏中显示
                                  2. 请求参数大小有限制
                                  3,不安全
                            * post
                                  1.表单的请求参数不会在地址栏中显示,封装在请求体中
                                  2. 请求参数的大小没有限制
                                  3.安全
        表单项的数据要想被提交,必须指定其name属性

        表单项标签
            * input
                属性type的常见取值
                    1.text:文本输入框,默认值
                        1.1 属性 placeholder,指定文本输入框的提示信息,当输入框的内容发生变化时自动消失
                    2.password 密码输入框
                    3.radio:单选框
                        *注意
                            3.1 要想实现多个单选框实现单选的功能,则多个单选框的name属性值必须一样
                            3.2 一般给单选框一个value值,显示提交后单选框所显示的值
                            3.3 属性checked="checked" 当input类型是单选框或者复选框时,可以添加这个属性表示默认选中
                    4.checkbox:复选框
                    5.file 文件选择框
                    6.hidden 隐藏域
                    7.submit 提交按钮 用来提交表单
                    8.button 普通按钮
                    9.image 图片按钮,可以用来提交表单 如<input type="image" src="hello.jpg"  height="45">
            * textarea文本域
            * select 下拉列表
                子元素 option 表示选项
        -->
  • 注册界面综合案例
    主要运用了表格标签和表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
</head>

<body>
<table  border="1" cellspacing="1" align="center" >
    <form method="get" action="#">
    
    <第一行>
    <tr >
        <td><label for="0">用户</label></td>
        <td>
                <input type="text" name="name" placeholder="请输入账号" id="0">
        </td>
    </tr>
    
	<第二行>
    <tr>
        <td><label for="3">密码</label></td>
        <td>

                <input type="password" name="password" placeholder="请输入密码" id="3">

        </td>
    </tr>

	<第三行>
    <tr>
        <td><label for="2">Email</label></td>
        <td>

                <input type="email" name="Eamil" placeholder="请输入邮箱号" id="2" />

        </td>
    </tr>

	<第四行>
    <tr >
        <td>手机号码</td>
        <td>
            <input type="text" name="telephone" placeholder="请输入号码">
        </td>
    </tr>

	<第五行>
    <tr>
        <td>性别</td>
        <td>

                <input type="radio" name="sex" value="man"><input type="radio" name="sex" value="woman"></td>
    </tr>

	<第六行>
    <tr>
        <td>出生日期</td>
        <td>
                <input type="date" name="birthday">
        </td>
    </tr>
	<第七行>
    <tr >
        <td >
                <input type="submit" value="注册">
        </td>
    </tr>
    </form>
</table>
</body>
</html>

综合案例效果图如下:在这里插入图片描述

  • 25
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

马明智

你的鼓励就是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值