简单了解HTML

深碍√TFBOYSˉ_ 2022-06-05 00:41 251阅读 0赞

1.   html:hypertext markup language(超文本标签语言)

*   *  HTML 指超文本标签语言。 
     *  HTML 文件是包含一些标签的文本文件。
     *  这些标签告诉 WEB 浏览器如何显示页面。
     *  HTML 文件必须使用 htm 或者 html 作为文件扩展名。
     *  HTML 文件可以通过简单的文本编辑器来创建。

1.  html的语法是使用各个标签来定义格式:使用(开始)<..>内容</..>(结束)，当开始与结束标记中间没有内容的时候可以使用缩写<../>
2.  标记（标签）的作用
    
     *  告诉浏览器如何显示内容
3.  常用的标签
    
    1.  注释
    2.  <a></a> 定义锚 ：
        
         *  通过使用 href 属性，创建一个到另外一个文档的链接 
         *  通过使用 name 或 id 属性，创建一个文档内部的书签 （在访问连接时可是使用\#name书签直接定位到该name属性指定的位置）
         *  href=URL target="\_blank"在新的空白窗口打开超链接
        
          
        
    3.  <B></B>定义粗体
    4.  <body>定义显示的主体
    5.  <br>插入一个回车（换行）
    6.  <font> 定义文本的字体，大小，颜色
    7.  <hr>定义水平线
    8.  <i>定义斜体
    9.  <img>定义插入图片
        
        1.  src：所显示图像的 URL。（图片的路径名称：绝对路径，相对路径）
        2.  alt：对图片的简短描述
        3.  align:规定如何根据周围的文本来排列图像（top顶端，middle居中，left，right图片在文字左侧，bottom文字的中线在图片的底部）
        4.  width:定义图片的宽度
        5.  height：定义图片的高度
        6.  border:定义图片的边框宽度
        7.      <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <b>hello world</B> <img src="../water.jpg" alt="这是一张图片" align="middle" width=300 height=400 border=5/> </BODY> </HTML>
    10. <sub>将文本显示为下标
    11. <sup>将文本显示为上标
    12. <U>在文本上加上下划线
    13. <table>定义表格
        
        1.  bgcolor背景颜色  
            
            
            1.  RGB
            2.  （x,x,x）百分比的颜色
            3.  \#xxxxxx十六进制的颜色
                
                1.  colorname颜色名称
        2.  border表格的边框宽度
        3.  colspan=""合并列  
            
        4.  rowspan=""合并行
    14. form表单（form 元素可为用户输入创建表单。表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。）
        
        1.  action：提交表单的地址（URL）
        2.  method：表单提交的方法
        3.  表单组件
            
            1.  <input>定义输入域，输入组件
                
                1.  type：指定input元素的类型，默认为"text"
                    
                    1.  button:普通按钮（需要js编程实现该按钮的功能）
                    2.  radio单选按钮，如果将多个单选按钮的name设置相同，则它们设置为同一组，checked属性 表示被选中
                    3.  checkbox：复选按钮（多选）
                    4.  file文件
                    5.  hidden隐藏
                    6.  image图片按钮（相当于提交按钮）
                    7.  password密码文本(对输入的内容做隐藏处理）
                    8.  reset重置按钮（重置当前按钮所在的表单范围）
                        
                        1.  submit提交按钮（将当前表单中的数据发送到action指定的地址）
                    9.  text文本框
                    10. name定义input元素的唯一名称
                    11. value定义按钮上的文本
                    12. 在输入中name重复的后台以数组的形式进行接收
            2.  select下拉选项（multiple多选属性）
                
                1.  例子
                    
                        <select name="degree" multiple> <option value ="1">小学</option> <option value ="2">初中</option> <option value="3">高中</option> <option value="4">大学</option> <option value="5">硕士</option> <option value="6">博士</option> <option value="7">博士后</option> <option value="8">剩斗士</option> <option value="9">壮士</option> <option value="10">烈士</option> </select>
                2.  selected被选中

*  测试用的代码
    
        <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <font color="red" size=25> H<sub>2</sub>O<br/> <hr/> 2<sup>10</sup>=1024 </font> <hr/> <form action=""> 用户名：<input type="text" name="userName" value="请输入用户名"/><br/> 密 码：<input type="password" name="passWord"><br/> 性别：<input type="radio" value="男" name="sex" checked>男 <input type="radio" value="女" name="sex">女<br/> 爱好：<input type="checkbox" value="1" name="hobby">乒乓球 <input type="checkbox" value="2" name="hobby">足球 <input type="checkbox" value="3" name="hobby">游泳 <input type="checkbox" value="4" name="hobby">赛车<br/> 学历：<select name="degree"> <option value ="1">小学</option> <option value ="2">初中</option> <option value="3">高中</option> <option value="4">大学</option> <option value="5">硕士</option> <option value="6">博士</option> <option value="7">博士后</option> <option value="8">剩斗士</option> <option value="9">壮士</option> <option value="10">烈士</option> </select><br/> 上传照片：<input type="file" name="photo" value="选择图片"/><br/> 自我介绍：<br/><textArea rows=8 cols=25>大家好</textArea><br/> <input type="button" value="普通按钮"> <input type="reset" value="一键重置"> <input type="submit" value="提交按钮"><br/> </form> </BODY> </HTML>
    
      
    
    
        <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <b>hello world</B> <hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/> <hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/> <hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/> <hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <a name="rrr"> <img src="C:/Users/dingshuangen/Desktop/课表.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/><hr/> <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/> <hr/> <table border=2 width=“3000”> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>价格</th> </tr> <tr> <td>1</td> <td>老人与海</td> <td>海明威</td> <td>55</td> </tr> <tr> <td>2</td> <td><a href="http://baike.sogou.com/v64392728.htm?fromTitle=%E9%92%A2%E9%93%81%E6%98%AF%E6%80%8E%E6%A0%B7%E7%82%BC%E6%88%90%E7%9A%84" target="_blank">钢铁是怎样炼成的</td> <td>尼古拉</td> <td>66</td> </tr> <tr> <td>3</td> <td><a href="http://v.sogou.com/series/mnqxe5dpn5xf6obrha4qtoxzykv5bvvv3q.html" target="_top">葫芦娃</td> <td>小虎</td> <td>25</td> </tr> <tr> <td>4</td> <td><a href="img.html#rrr">黑猫警长</td> <td>小胖墩</td> <td>67</td> </tr> </table> </BODY> </HTML>