HTML

目录:

  • HTML基础

  • 列表、表格与框架

  • 表单

一、HTML基础

1.1 HTML的基本结构

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

1.2 排版信息

<!--标题标签-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

<!--段落标签-->
    <p>太阳当空照</p>

<!--换行标签-->
    <p>太阳当空照<br/>花儿对我笑</p>

<!--水平线标签-->
    <hr/>

<!--字体样式标签-->
    <strong>加粗</strong>
    <em>斜体</em>

<!--注释和特殊符号-->
    注释:<!--只会在代码中显示-->
    特殊符号:&nbsp、空格;&gt、>;&lt<; &copy、版权符号

<!--图片相关标签-->
<img src="img/tu.jpg" alt="图像替代文本" title="鼠标提示文字"width="100px" height="100px" align="absmiddle"/> <!--图片和文本的对齐方式-->

<!--a标签-->
    基本:<a href="" target="_blank">文本内容</a>  <!--href代表路径-->
    锚链接:<a name="mao">乙位置</a>  <a href="#mao">跳到乙位置</a>
    锚链接跨页面:href属性上加文件路径在加上锚的名称
    功能连接:邮箱:<a href="mailto:1403948905@qq.com">QQ邮箱</a>
           QQ:tencent://message/?v=1&amp;uin=22841758 &amp; site=www.hda.com & amp; Menu=yes

二、列表、表格与框架

2.1 列表

<!--基本写法--> <!--type是类型:disc实体圆心、square视图方心、circle空心圆-->
    <ul type="circle">
        <li>○苹果</li>
        <li>○香蕉</li>
    </ul>    

<!--无序列表--><!--可以无限嵌套-->
    <ul>
        <li>苹果
            <ul>
                <li>甜的
                     <ul>
                             <li>很甜</li>
                             <li>一般</li>
                     </ul>
                </li>        
                <li>不甜的</li>    
            </ul>
        </li>
        <li>香蕉</li>       
    </ul>

<!--有序列表--><!--type:1数字符号、A/a大小写字母符号、I/i大小写罗马数符号-->
    <ol>
       <li>苹果</li>
       <li>香蕉</li>
    </ol>

<!--定义列表-->
    <dl>
        <dt>所属专业</dt>
            <dd>计算机软件工程</dd>
    </dl>

2.2表格

<!--基本写法,可以互相嵌套--><!--width宽、height高、cellpadding间距、cellspading填充、border边框--><!--对齐方式:align水平对齐、valign垂直对齐-->
<table width="" height="" cellpadding="" cellspacing="" border="">
      <tr>
             <td colspan="2"></td> <!--跨列-->
             <td></td>
      </tr>
      <tr>
             <td rowspan="2"></td> <!--跨行-->
             <td></td>
      </tr>
</table>

2.3框架

    <frameset cols=*30%,50%* frameborder="0">
             <frame src="" name="">
             <frame src="" name="">
             <frame src="" name="">
    </frameset>
<!-- cols纵向分割、rows水平分割 -->
<!-- Src为每个框架显示的路径 -->
<!-- frameset不能输入在body里面->

<!-- iframe内联式框架-->
<iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no" noresize="noresize" width="x" height="y"></iframe>
<!--iframe必须是对签 --><!--scroling是否出现滚动条、noresze是否允许调整框架大小 frame中设置 -->

2.3表单

<!--基本写法 --><!--method提交方式、action提交目标-->
    <form method="post" action="result.html">
      <p>名字:<input name="name" type="text"></p>
      <p>密码:<input name="pass" type="password"></p>
      <p>
            <input name="submit" type="button" value="提交">
            <input name="reset" type="reset" value="重填">
      </p>
    </form>


<!--表单元素属性:name:指定元素名称、value:元素初始值-、size:初始宽度 、maxlength输出的最大字符串、checked指定按钮是否被选中    -->

<!-- input -->
  <!--文本框-->:text:<input name="yi" id="yi" type="text">  mame:对服务器相应的数据,id: 机器识别
  <!--密码框-->:password:<input name="pass" id="er" type="password">  
  <!--单选框-->:radio:<input name="gen" type="radio" value="男" checked="checked" ><input name="gen" type="radio" value="女"><!--复选框-->:checkbox:<input type="checkbox" name="interest" value="sports">运动
                     <input type="checkbox" name="interest" value="sports"  checked="checked">聊天
                       <input type="checkbox" name="interest" value="sports">玩游戏

  <!--重置按钮--><input type="reset" name="butReset" value="reset按钮">
  <!--提交按钮--><input type="button" name="butResult" value="提交"/>


<!--文件域--><!--注意:在from标签加上enctype="multipart/from-data"提交方式post-->
<input type="file" name="files"/>浏览
<input type="submit" name=upload value="上传"/> 上传

<!--隐藏域-->
<input type="hidden" value="666" name="userid"/>

<!--列表框-->
       <select name="year" size="1"> <!--size显示的行数,selected默认行数-->
          <opention value="0" selected="selected">0</opention>
          <opention value="1">1</opention>
          <opention value="2">2</opention>
       </select>
<!--扩展列表框-->
       <select name="year" size="1"> <!--size显示的行数,selected默认行数-->
         <optgroup lable="一线城市">
            <opention value="0" selected="selected">0</opention>
            <opention value="1">1</opention>
            <opention value="2">2</opention>
          </optgroup>
       </select>

<!--多行文本域-->
<textarea name="text" rows="10" cols="10">文本内容</textarea>


<!--表单高级应用-->
<!--只读和禁用-->:redonly="redonly"只读;disabled="disabled"禁用;
<!--必填-->:requried="required"


<!--表单语义化--><!--对搜索引擎友好-->
<fieldest id="">
          <p>名字:<input name="name" type="text"></p>
          <p>密码:<input name="pass" type="password"></p>
          <input type="button" name="butResult" value="提交"/>
</fieldest>

.

 

posted @ 2020-12-14 08:39  未来尚可期  阅读(148)  评论(0编辑  收藏  举报