html学习总结
2017-11-21 本文已影响0人
想飛的烏龜
HTML入门学习
一、HTML基础
(1)标签：html的ml就标识标记语言，是xml的一种，格式固定
(2)标签都是成对出现的，<title></title>,也可以是<title/>
(3)标签的作用：就是描述数据的具体含义和展现样式
<html>
<head>
<!--
head中所展现的内容有：
1.title
2.编码、类型
3.css样式
4.JavaScript函数
-->
<title>selenium处理基本页面元素</title>
</head>
<body>
<!--body标签：界面的数据，需要通过标签描述2个内容：
1. 数据的含义
2. 数据的展现方式
-->
<!--b标签：字体加粗，block简写 -->
</br> <!--换行-->
<!--
DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。
DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。
DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，
或者是通过使用样式表格式化这个块来进行控
类似操作系统中的文件夹
-->
<div style="font-size:36;text-align:center"><b>seleniun处理基本元素</b></div>
</body>
</html>
- html标签：只要是html界面，都是以<html>开头，</html>结尾
- head标签：一个html界面分2部分，一部分叫<head>,一部分叫<body>
- title标签：一个界面在浏览器展现的内容：tab页，一个叫页面
二、标签和属性
1.标签属性：id、name、class、style等等，用来描述标签本身，而非标签的内容
2.class属性：类型，很多标签可以取同一个类型，这样方便根据类型一次找到所有相关的标签进行处理,跟微信好友打标签一个用途
3.style属性：风格、样式，就是展现成什么样
<html>
<head>
<title>selenium处理基本页面元素</title>
</head>
<body>
</br>
<div class="text" style="font-size:36;text-align:center"><b>seleniun处理基本元素</b>
<br><!--换行-->
被div统一设置了字体大小和居中
</div>
没在div里面，不受div控制，需要重新设置样式
</body>
</html
<html>
<head>
<title>selenium处理基本页面元素</title>
</head>
<body>
</br>
<div class="text" style="font-size:36;text-align:center">
<b>seleniun处理基本元素</b>
</div>
<hr><!--分割线-->
<!--
table：表格，用来界面栅格化/网格化布局
写简历，普通word一行一行的写，行吗？写出来肯定乱
先用一个表格，然后在表格里面填写，这样整个界面可以左对齐、居中
去银行办业务，天的单子，都是一页纸上面，有一个表格
-->
<!--border属性：边框粗细 -->
<table cellpadding="10" cellspacing="0" border="2" >
<!--thead:表头，或者字段名
tr：一行
th：一列（字段行的列）
-->
<thead>
<tr>
<!--width属性：宽度，可以是绝对值，也可以是百分比
class属性：归类
-->
<th width=20% class="widgetleft" >测试内容</th>
<th width=80% class="widgetStyle" >页面基本元素</th>
</tr>
</thead>
</table>
</body>
</html>
css
- 单个标签独用，用style属性在标签中定义
- 单个界面 多个标签共用，在head中用style标签定义
- 多个界面共用，在.css文件中定义样式，在head中用link引用
<html>
<head>
<title>selenium处理基本页面元素</title>
<!--Style标签，定义样式、风格；type是一个属性，含义是类型，说明是一个文本的css样式-->
<link rel="stylesheet" type="text/css" href="html_04_style.css">
</head>
<body>
</br>
<div class="text" style="font-size:36;text-align:center"><b>seleniun处理基本元素</b></div>
<hr>
<table cellpadding="10" cellspacing="0" border="2">
<thead>
<tr>
<th width=20% class="widgetleft">测试内容</th>
<th width=80% class="widgetStyle">页面基本元素</th>
</tr>
</thead>
</body>
</html>
JavaScript
1.单个标签中（属性）用onclick 属性
2.单个界面多个标签在head （标签）script标签定义
3.多个界面在JavaScript文件定义函数，在head中用script标签，src（资源属性路径）属性引用
<html>
<head>
<title>selenium处理基本页面元素</title>
<link rel="stylesheet" type="text/css" href="html_04_style.css">
<!-- script标签:脚本标签，所谓的脚本，就是一段固定操作的代码
language属性：编程语言，也就是脚本用什么语言来写
JavaScript：一种前端界面的脚本语言，简称JS
type属性：内容属于什么数据类型
text/javascript:说明是一种文本内容，用JavaScript语法写的
-->
<script language= "javascript" type="text/javascript">
/* function：函数，也就是定义一个动作
clickbutton()：定义的这个函数的名字,方法名后面必须加括号（）
flag：参数，就是调用方法的时候，要传哪些数据
{}：函数体，以{开始，以}结束
if：如果，判断条件
():写条件，类似SQL语句中的where
flag==1：传进来的参数flag的值是否等于1
{}：如果等于1，就执行{}花括号里面的操作
alert():告警弹框，就是弹出提示
测试alert对话框：alert()方法的参数，告警框的提示内容
*/
function clickbutton(flag)
{
if (flag == 1)
{
alert("测试alert对话框");
}
}
</script>
</head>
<body>
</br>
<div class="text" style="font-size:36;text-align:center"><b>seleniun处理基本元素</b></div>
<hr>
<table cellpadding="10" cellspacing="0" border="2">
<thead>
<tr>
<th width=20% class="widgetleft">测试内容</th>
<th width=80% class="widgetStyle">页面基本元素</th>
</tr>
</thead>
<tr>
<td>alter对话框</td>
<td>
<input type="button" name="alterbutton" value="测试alter对话框" onclick = "clickbutton(1);" />
</td>
</tr>
</body>
</html>
