第三章3.1HTML技术与CSS技术

2023-06-15,,

web中的html以及css:

html(超文本标记语言:Hyper Text Markup Language):用于描述网页的一种语言;

通常其根标签使用html标签;使用尖括号表示:<html>,其也是由开始标签和结束标签两部分所构成;

过多的属性都会通过css进行完成(层叠式样式)

作用:1.实现html的样式表的定义
2.解决了内容与表现分离问题
3.外部样式可以极大的提高工作效率(所有的样式都存储在外部的css文件中)
css样式语法:

    选择器{key:value}
    使用类  示例:

    .bg-yellow8{background: #f6b765;}  
    .bg-red{background: #f03d3d;}

引用方法:

 

示例演示:

html

<!DOCTYPE html>
<html>
<!--一个html标签中会存在head和body两个主要的标签-->
<head>
<meta charset="utf-8">
<title>this is my first demo page</title>
</head>

<link rel="stylesheet" href="test.css"/>

<!--用于进行描述一个网页中的文本内容-->
<body>
<h1><font color="red">完成以下的注册相关信息</font></h1>
<a href="http://116.233.73.127:18082/#/home">进入一点通用的PC前台</a><br />
<!--定义一个表格-->
<table border="1" width="60%" align="center">
<tr>
<td class="left">id</td>
<td class="left">name</td>
</tr>
<tr>
<td>1</td>
<td class="bg-yellow8">张三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
</table><br />
<!--表单-->
<form>
<!--输入框、密码框-->
用户名:<input type="text" value="请输入用户名" /><br />
密码:<input type="password"/><br />
验证码:<input type="text"/><img src="https://uniapp.api.dso2o.csdeshang.com/home/Seccode/makecode.html?1664183940561"/><br />
<!--随机验证码是服务器的地址,随机取值,验证码的一种解决方式,删除服务器上多余的验证码,只留下一个-->
<!--复选框,单选框,下拉列表框-->
兴趣:打LOL:<input type="checkbox"/>
逛街:<input type="checkbox"/><br />
性别:男: <input type="radio" name="sex"/>
女: <input type="radio" name="sex"/><br />
学历:<select name="">
<option value="">未选择</option>
<option value="">博士</option>
<option value="">专科</option>
<option value="">本科</option>
<option value="">硕士</option>
</select><br />
<!--clos是定义文本区域的宽度,而row定义文字区域的高度-->
备注:<textarea cols="10" rows="6"></textarea><br />
<!--按钮操作;按钮触发会存在事件;在web自动化测试中如果定位得到但是无法使用click方法的话,则还可以使用onclick事件-->
<input type="submit" value="提交" onclick="javascript:alert("确定提交?");"/>
&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/>
<input type="button" value="确定"/>
</form>
<!-- 块级标签 -->
<div>
<h3>块级1</h3>
<p>this is paragraph 1</p>
</div>
<div>
<h3>块级2</h3>
<p class="bg-red">this is paragraph 2</p>
</div>
<!-- 如果在自动化中定位不到div标签,那么可以采用其父子的上下级进行定位 -->
<div>
<h3>块级3</h3>
<p>this is paragraph 3</p>
</div>
<!-- ol和ul,其中ol标签表示的是有序列表,ul表示的是无序列表 -->
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ol>
<!-- span是用于进行组合行内元素,便于格式化 -->
<p><span>这是span标签</span></p>
<p><span>这是span标签</span></p>
<p><span>这是span标签</span></p>
</body>
</html>
<!--相比xml语法不是那么严格,结束标签丢失是不会影响整体页面,只需刷线即可加载最新的页面-->

 css文件:

第三章3.1HTML技术与CSS技术的相关教程结束。

《第三章3.1HTML技术与CSS技术.doc》

下载本文的Word格式文档,以方便收藏与打印。