HTML：超文本标记语言（Hyper Text Marker Language）
H5：HTML5
开发一般分为前端开发和后端开发 后端开发编写逻辑代码 前端开发(UI)hi写页面样式、页面排版
普通文件只能记录文字，而超文本是指页面内可以包含图片、链接、视频等等。
标记：
一个人给他去取一个绰号，我们叫他的绰号就是知道是那个人，这个绰号就相当于这个人的标记；HTML中标记体现在标签上，里面有不同的标签代表不用的含义，例如：a标签表示链接，img标签表示图片。
学习HTML：为后面的UI测试进行元素定位
浏览器F12键：开发者工具
IDE：Hbuilder
打开hbuilder，新建web项目
项目文件夹：
css：层叠样式表
img：图片保存的位置
js：JavaScript 一种直译式的脚本语言
index.html：基本格式文件
HTML基本格式
1.HTML文件默认是以.html结尾
2.HTML文件基本结构由html head body组成
3.标签一般成对出现，一些标签不一定例如 空格 
<!DOCTYPE html> #文件类型：html
<html> #html文档开始
<head> #头部
<meta charset="UTF-8"> #设置字符集格式
<title></title> #标题
</head> #头部结束
<body> #体部
HTML文件内容
</body> #体部结束
</html> #html文件结束
HTML基本标签：
<h1>...<h1> 字体最大 <h6>...<h6> 字体越来越小，字体加粗效果且自动换行
<title>...</title> 标题标签，打开网页时显示在标题栏的内容
<p>...</p> 段落标签，默认换行且行距变大
  表示一个空格
strong和b标签：表示加粗字体
<strong>123</strong>
<b>123</b>
br标签：换行
em和i标签：斜体标签
<font color ='颜色名（英文）'>...</font>
img标签：引用图片
引用本地资源图片
注意点： ’./‘表示当前目录，’../‘表示上一级目录
谷歌浏览器不支持alt属性，但可以使用title
加宽width，加高hight
换行br
先将图片放入img文件夹中
<img src = ‘图片路径’ title = ‘文件描述’ width= ‘宽度数值’ hight= ‘高度数值’ />
引用网络资源
<img src="网络图片的链接" title = '文件描述' width="300" height="200"/>
a标签：链接标签
点击后覆盖原有的页面：<a href="链接地址">链接提示</a>
点击后新打开一个页面：加上target标签 <a href="链接地址" target = '_blank'>链接提示</a>
死链接：href后面加一个#<a href="#" >这是一个死链接</a>
图片链接：a标签里面加入图片，可以点击图片进入网址 <a href="网址" ><img src="图片路径" title = '图片' />图片链接</a>
<ol>有序列表 order list
<ol>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
改变排序样式：
<ol type="A">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
1：1,2,3
a：a,b,c
A：A,B,C
i：i,ii,iii
I：罗马数字排序
<ul>无序标签 unorder list
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ul>
去掉小圆点
<table> 表格标签
border属性表示表格边框的粗细
aligen属性控制表格在网页中的位置 center 居中 left 左边 right 右边
cellpadding 表示单元格与内容之间的距离
cellspacing 表示单元格与单元格之间的距离
weight 表格宽
hight 表格高
tr 行
td 列
th 表头：会自动居中及加粗
表格跨行：rowspan属性
表格跨列：conspan属性
创建表格快捷操作;
输入 table>tr*行数>td*列数
然后按table键
<form>表单标签：
action属性 被提交的接口地址
methcd: 提交的方法 = ‘post’
<input >输入框
type：输入的类型
text 文本类型
password：加密类型
radio：单选框
checkbox复选框
file：文件
name属性 设置为sex是 单选框男女才可以避免性别同时选的bug
check属性：设置默认选项
textarea文本框标签
select 下拉框属性
button 按钮
reset 重置
submit 即时提交
CSS层叠样式表：
层叠样式表的基本格式：
1.在标签中加入style，style就是CSS样式代码
控制该标签的样式，优先级最高
2.在head中加入style样式
控制所有该类型标签的样式
3.通过外链的方式
链接ccs文件中设置的样式
id选择器：
id所对应的前面要加#
标签选择器：
class选择器：
class属性前面要加.
组合选择器：
后代选择器：
要写它的上级标签 中间加空格
伪类选择器：
鼠标一上去时会有颜色变化
字体样式;
字体大小 font-size：
字体类型 font-family：
字体风格font-style：
文本样式：
text-align 居中、靠左、靠右
text-underlie 下划线
cursor 游标
作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
</style>
</head>
<body>
<form action="www.duoceshi.cn" method="post">
<table border="" bgcolor="yellow" cellpadding="10" cellspacing="" width="500" height="">
<tr>
<th align="middle" colspan="2">学生报名登记表</th>
</tr> <tr>
<td>用户名</td>
<td align="middle"><input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>密码</td>
<td align="middle"><input type="password" /></td>
</tr>
<tr>
<td>密码确认</td>
<td align="middle"><input type="password" /></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" id="sex男" value="" />男
<input type="radio" name="sex" id="sex女" value="" />女
</td>
</tr>
<tr>
<td>选择科目</td>
<td><input type="checkbox" name="" id="" value="" />html
<input type="checkbox" name="" id="" value="" />python
<input type="checkbox" name="" id="" value="" />linux
<input type="checkbox" name="" id="" value="" />mysql
</td>
</tr>
<tr>
<td>选择学校</td>
<td><select name="">
<option value="">-选择就读的学校-</option>
<option value="">深圳多测师</option>
<option value="">广州多测师</option>
<option value="">上海多测师</option>
</select></td>
</tr>
<tr>
<td>选择文件</td>
<td><input type="file" name="" id="" value="" /></td>
</tr>
<tr>
<td colspan="2"align="middle">
<input type="reset" name="" id="" value="重置" />
<input type="submit" name="" id="" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
|
|
530
0
多测师社区 
