2.2.1 Web前端HTML技术与CSS技术

最新推荐文章于 2024-08-02 20:42:11 发布

zemuerqi

最新推荐文章于 2024-08-02 20:42:11 发布

阅读量258

点赞数

分类专栏： Python全栈测试开发文章标签： html css html5 javascript web

本文链接：https://blog.csdn.net/zemuerqi/article/details/107203287

版权

Python全栈测试开发专栏收录该内容

63 篇文章 21 订阅

订阅专栏

什么是HTML

“html”是“Hyper Text Markup Language”的缩写，即“超文本标记语言”，是标准通用标记语言下的一个应用。html并不是一种编程语言，它是一种标记语言，是由一些标签组成，主要是用来制作网页的。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
HTML 标签通常是成对出现的，比如 <b> 和 </b>
开始和结束标签也被称为开放标签和闭合标签
标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

标签属性

通常是以键值对形式出现的. 例如 name="wood"
属性只能出现在开始标签或自闭和标签中.
属性名字全部小写,属性值必须使用双引号或单引号包裹例如 name="wood"

标签分类

　标签一般分为两种：

　　1. 块级标签

　　　　霸占一整行的标签。比如：<h>,<p>,<div>,<form>等

　　2. 行内标签

　　　　可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等

特殊字符

常用标签使用

<html>  <!--一个html标签中会存在head和body两个主要标签-->  <head>    <title>this is my first page</title>  </head>  <!--引用外部定义的css文件-->  <link rel="stylesheet" href="C:\Users\zemuerqi\Desktop\css.css" />    <!--用于进行描述一个网页中的文本内容-->  <body>     <!--color表示的是font标签的属性-->    <h1><font color="red">完成以下信息的注册</font></h1>    <a href="http://www.baidu.com">百度一下</a>    <!--定义一个表格-->    <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>    <!--表单-->    <form>        <!--输入框、密码框-->        用户名：<input  type="text" value="username"/><br/>        密码：<input type="password"  /><br/>        验证码：<input type="text" /><img src="http://123.57.71.195:8787/index.php/home/seccode/makecode.html?1591430678772" /><br/>        <!--复选框、单选框、下拉列表框-->        兴趣：打LOL：<input type="checkbox" />              逛街：<input type="checkbox" /><br/>        性别：男：<input type="radio" name="sex" />              女：<input type="radio" name="sex"/><br/>        学历：<select>              <option>未选择</option>              <option>博士</option>              <option>本科</option>              <option>大专</option>        </select><br/>        <!--clos是定义文本区域的宽度，而row定义文字区域的高度-->        备注：<textarea clos="10" rows="6"></textarea><br/>        <!--按钮操作;按钮触发会存在事件;在web自动化测试中如果元素定位得到但是无法使用click方法的话，则还可以使用onclick事件进行执行-->        <input type="submit" value="提交" onclick="javascript:alert('确定提交？');"/>        &nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" />        <input type="button" value="确定" />    </form>    <!--块级标签-->    <div>      <h3>块级1</h3>      <p>这是第一个段落</p>        用户名：<input  type="text" value="username"/><br/>        密码：<input type="password"  /><br/>    </div>    <div>      <h3>块级2</h3>      <p class="bg-red">这是第二个段落</p>        用户名：<input  type="text" value="username"/><br/>        密码：<input type="password"  /><br/>    </div>    <!--ul和ol，其中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></span></p>    <p><span>这是span标签</span></span></p>    <p><span>这是span标签</span></span></p>  </body>
<!--相比xml语法不是那么严格,结束标签丢失是不会影响整体页面，只需刷新即可加载最新页面--></html>

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 p元素内的文字颜色定义为红色，同时将字体大小设置为 18 像素。

在这个例子中，p是选择器，color 和 font-size 是属性，red 和 18px 是值。

p {color:red; font-size:18px;}

多重声明

如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：

p {text-align:center; color:green;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p {  text-align: left;  color: red;  font-family: arial;}

选择器的分组

可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是红色的。

h1,h2,h3,h4,h5,h6 {  color: red;  }

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>

类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">这是wood实现html的第一个html页面</h1>
<p class="center">以下相关标签的详细说明</p>

属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8及以上才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

下面的例子为带有 title 属性的所有元素设置样式：

[title]{color:red;}

属性和值选择器

下面的例子为 title="wood_programming" 的所有元素设置样式：

[title=wood_programming]{border:6px solid green;}

css示例

/*设定背景*/body {background-color: yellow}h1 {background-color: #00ff00}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}span.highlight{background-color:yellow}/*设置文本颜色*/body {color:red}h1 {color:#00ff00}p.ex {color:rgb(0,0,255)}/*设置字体大小、风格、格式*/h1 {font-size: 300%}h2 {font-size: 200%}p {font-size: 100%}p.normal {font-style:normal}p.serif{font-family:"Times New Roman",Georgia,Serif}p.sansserif{font-family:Arial,Verdana,Sans-serif}/*设置边框样式、颜色*/p.double {border-style: double}p.groove {border-style: groove}p.ridge {border-style: ridge}p.one{border-style: solid;border-color: #0000ff}p.two{border-style: solid;border-color: #ff0000 #0000ff}/*无序列表标记*/ul.disc {list-style-type: disc}ul.circle {list-style-type: circle}ul.square {list-style-type: square}ul.none {list-style-type: none}/*下面表示 是table标签的tr第一个标签设定的css*/table tr:nth-child(1) {color: #008000;font-size: 40px}/*与上面是等价的*/tr:first-child {background: green;font-size: 40px}/*下面表示的是偶数行tr设定的css*/tr:nth-child(2n) {color: gold}