您的位置：首页 > Web前端 > HTML

html超文本标记语言

2016-08-18 22:26 106 查看
以前上学学过这门课程，但作为测试的我，工作中使用得甚少。因最近需要做自动化测试，则再次复习一下html的内容，为以后做测试工作理解程序更清晰，将复习内容记录下来，方便以后查看。

html：超文本标记语言，由标签组成，不区分大小写。

一、网页=html+css+javascript

1、html：封装网页上的数据，给页面提供格式，不是编程语言。

2、css：美化和修饰页面。

3、javascript：操作页面。

二、html的使用

1、标记HTML语言的范围：

<span style="font-family:Microsoft YaHei;"><html>
<head>代码的头部分（辅助信息）
    <title>这时我的第一个网页</title>
</head>
<body>体部分，包含网页的实际包含数据</body>
</html></span>
2、注释的方式：注释方式只有一种：<!--   注释的部分   -->

3、字体的标签font：改变字体的大小和颜色。

<font size=“5” color=“red”>字体标签示例</font>
4、标签的优先级，靠近文本的标签为主。

5、转义字符，所有的转义字符都是以&关键字开头，如：

1）<  代表：<

2）>  代表：>

3）&  代表：&

4）"  代表："

5）   代表：空格

6）   代表：Tab

6、图像标签

<span style="font-family:Microsoft YaHei;"><img alt=“<span style="color:#000000;">图片辅助说明</span>” src=“a.jpg”/></span>
其中，在里面可以对图片的大小和边框之间的属性进行修改。src：指引用的是路径。

路径分为：

绝对路径：就是文件的计算机路径，兼容性差；

相对路径：同一目录下，直接写文件的名称  Koala.jpg

同一目录下的目录下边的文件，images/Koala.jpg

与上层目录相同目录的目录下，  ../images/Koala.jpg

7、表格标记

1）表格标记（<table></table>）由行和列组成

2）标题标签：<caption> </caption>  居中显示

3）表头标签：<th></th>

4）行标签：<tr></tr>

5）列标签：<td></td>

6）<tbody></tbody>分模块的显示，在网页中可以分块显示，存在的目的：加快页面上数据的显示速度。

参数：

border :设置表格的边框。

bordercolor:设置表格边框的颜色。

cellpadding:文本与边框的距离。

cellspacing:td与td之间的距离。

跨行合并单元格：  rowspan="2"

跨列合并单元格：  colspan="2"，注意，被合并的行或列就不需要写出来了。

8、超链接：

<a href="URL" target=”target”>链接的名称</a>
其中，Target：表示跳到某个目标窗口

1）href属性的值要明确指定协议,如果没有明确指定,默认是file(文件)协议。它会到磁盘中去查找相关的内容。

2）一个网址必须书写完整，如http://www.baidu.com

3）a标签中包含着的连接地址中有这么几个协议系统识别  http/ftp/file

4）对于其他的协议：thunder、e2k/mailto等自定义协议会在本地资源内调用。

注意点：

下划线的表示：<a href="javascript:void(0)">下划线</a> 

超链接的另外一种用法：定位标识（锚点）

<span style="font-family:Microsoft YaHei;"><a name=“first”>标题一</a>
<a href=“#first”>跳到标题一</a></span>

9、框架标签

框架标签<frameset>不可以放在<body>标签内,一般放在<head>标签和<body>标签之间

1）框架的主要作用：用来拆分窗口的。

2）需要同时切割行列的时候，需要注意cols   rows 。

3）进行切割，大小可以通过px直接控制，也可以用百分比来划分。

4）name属性是用来指定的地址位置的。

5）noresize  固定死框架结构，禁止用户重新更改窗口的尺寸。

6）切割的大小是用数值，*来确定的，target="name" 指定到该name属性的框架中。

7）画中画标签iframe

frameset 与 iframe 区别：前者是固定死的，后者是不固定的小窗口

<span style="font-family:Microsoft YaHei;"><iframe src=“1.html“ name=“right”>很遗憾您的浏览器不支持iframe</iframe></span>


10、表单标签：from

<span style="font-family:Microsoft YaHei;"><form action=”指定的文件” method=”get/post”></form></span>
1）把表单里的数据提交到指定的文件中处理。
2）get方式提交：提交过去的数据是存储请求行当中，通过浏览器地址可以看见提交的内容，不适合提交敏感信息的数据。

3）post方式提交：提交过去的数据是存储在请求体当中，通过浏览器地址看不见，这样子的好处是安全性高，不会暴露自己的信息。

<1>文本框

<span style="font-family:Microsoft YaHei;"><input type="text" name="user">   </span>


<2>密码框

<span style="font-family:Microsoft YaHei;"><input type="password" name="paw">
<input type="password" name="repaw"></span>

<3>单选框

<span style="font-family:Microsoft YaHei;"><input type="radio" name="sex">男
<input type="radio" name="sex">女</span>

name相同的才能在其中选其一

<4>多选框

<span style="font-family:Microsoft YaHei;"><input type="checkbox" name="hobbies">游泳
<input type="checkbox" name="hobbies">看书
<input type="checkbox" name="hobbies">音乐
<input type="checkbox" name="hobbies">瑜伽</span>

<5>选择框

<span style="font-family:Microsoft YaHei;"><select>
<option>请选择省份</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select></span>

<6>上传照片

<span style="font-family:Microsoft YaHei;"><input type="file" /></span>


<7>多行文本框

<span style="font-family:Microsoft YaHei;"><textarea rows="5" cols="30" ></textarea></span>


没有进行封装数据

<8>隐藏框

<span style="font-family:Microsoft YaHei;"><input type="hidden" /></span>


<9>提交按钮

<input type="submit" value="提交" />


<10>重置按钮

<input type="reset" value="重置" />


注意：重置不是删除信息，只是把所有值都恢复到默认值

<11>Value值的使用

<span style="font-family:Microsoft YaHei;"><input type=“text” name=“” /> <!--文本框-->
<input type=“password” name=“” /> <!--密码框-->
<input type=“radio” name=“” value=“” /> <!--单选框-->
</span><pre name="code" class="html"><pre name="code" class="html"><span style="font-family:Microsoft YaHei;"><input type=“checkbox” name=“”  value=“”/> <!--复选框-->
<input type=“hidden” name=“”  value=“”/> <!--隐藏框：页面不显示,但是数据需要提交-->
<input type=“submit” />  <!--提交按钮：单击后提交表单内容-->
<input type=“reset” /> <!--重置按钮：将表单元素中输入的内容设置为初始值-->
<input type=“button”  value=“按钮” /> <!--按钮：自定义事件,value为按钮显示文本-->
<input type=“file”> <!--文件上传-->
<input type=“image” /> <!--图像：可以取代提交按钮,可以设置按钮图片背景--></span>




<span style="font-family:Microsoft YaHei;"><select> <!--<span style="color:#000000;">下拉列表（可多选）</span>-->
   <option>--请选择国家--</option>   <!--中国默认情况下被选中-->
   <option value=“中国” selected=“selected”>中国</option>
   <option value=“美国”>美国</option>
</select></span>


11、Name 与Value的区别：

Name: 当把表单数据传递给服务端的时候，name属性作为参数的名称而存在。

Value: 把表单数据传递给服务端的时候，value属性作为参数的值而存在。其中，作为按钮而言，value是按钮中显示的文本。作为可输入的文本框及密码框而言，value就是用户输入的内容。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航