web自动化：前端页面组成

1|0一.web页面的组成


1|11. 常用：HTML + CSS + Javascript


1|22. HTML：定义页面的呈现内容


1|33. CSS：Cascading Style Sheets，层叠样式表


控制你的网页如何呈现，即布局设置。比如字体颜色、字体大小、在页面呈现的大小等

1|44. Javascript：如果你希望你的网页依据不同的情形做不同的事情呢？需要一门编程语言，javascript就是其中一种


2|0二. HTML


2|11. 什么是HTML？


  • HTML是用来描述网页的一种语言

  • HTML指的是超文本标记语言(HyperText Markup Language)

  • HTML不是一种编程语言，而是一种标记语言(markup language)

  • 标记语言包含一套标记标标签(markup tag)，HTML使用标记标签描述网页

  • HTML文档后缀名为.html或.htm                                     

2|22. HTML标签


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

  • HTML标签是由尖括号包围的关键词，比如<html>

  • HTML标签通常是成对出现的，不如<b>和</b>

  • 标签对中第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签  

2|33. 常用标签对


标签 描述
<html> 定义HTML文档
<body> 定义文档的主体
<head> 定义文档的信息
<title> 定义文档的标题
<meta> 定义文档中的元数据
<link> 定义一个文档和外部资源之间的关系(引用)
<body> 定义文档的主体
<p> 定义一个段落
<h1>-<h6> 定义标题
<a> 定义一个超链接
<img> 定义图像
<div> 定义文档的区域，块级
<table> tr td <table>：定义表格，tr：定义表格的行，td：定义表格的单元
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<form> 定义供用户输入的表单
<input type="text"/"password"/"radio"/"checkbox"/"submit"/"file"/"button"> 定义输入框
<select>/<option>

<select>：定义下拉列表

<option>：定义下拉列表中的选项
<button> 定义一个点击按钮

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2|44. HTML属性


  • HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息

  • 属性总是以名称/值对的形式出现，比如：name="value"

  • 属性总是在HTML元素的开始标签中规定

下面列出了适用于大多数HTML元素的属性：

属性 描述
class 规定了元素的类名(类名可以重复)
id 规定了元素的唯一id
style 规定了元素的行内样式(inline style)
title 描述了元素的额外信息(可在工具提示中显示)

 

 

 

 

 

2|55. 实例1：表格


<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>表格</title>
</head>
<body>
　　<table border="1">
　　　　<tr>
　　　　　　<th>内容1</th>
　　　　　　<th>内容2</th>
　　　　</tr>
　　　　<tr>
　　　　　　<td>第一行单元格1</td>
　　　　　　<td>第一行单元格2</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>第二行单元格1</td>
　　　　　　<td>第二行单元格2</td>
　　　　</tr>
　　　</table>
</body>
</html>

 结果：

2|6实例2： 输入框


<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>输入框</title>
</head>
<body>
　　<form>
　　　　First name: <input type="text" name="firstname" />
　　　　<br>
　　　　Last name: <input type="text" name="lastname" />
　　</form>
</body>
</html>

 

结果：

2|7实例3：下拉列表


<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>下拉列表</title>
</head>
<body>
　　<select>
　　　　<option>--请选择一个城市---</option>
　　　　<option>---北京---</option>
　　　　<option>---上海---</option>
　　　　<option>---广州---</option>
　　　　<option>---深圳---</option>
　　</select>
</body>
</html>

 结果：

2|8 实例4：有序列表和无序列表


<!DOCTYPE html>
<html>
<head>
　　<meta charset="gbk">
　　<title>有序列表和无序列表</title>
</head>
<body>
　　<ol>
　　　　<li>Coffee</li>
　　　　<li>Milk</li>
　　</ol>
　　<ul>
　　　　<li>Coffee</li>
　　　　<li>Milk</li>
　　</ul>
</body>
</html>

结果：

3|0三. CSS的三种引入方式


3|11. CSS的三种引入方式：内联样式(行内样式)、内部样式、外部样式


3|22. 样式优先级：内联样式(行内样式)>内部样式>外部样式


3|33. 实例1——内联样式：直接在标签内部通过使用style属性添加CSS样式


 

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>内联样式(行内样式)</title>
</head>
<body>
    <!--使用内联样式引入CSS-->
    <h1 style="color:blue;">这是一级标题</h1>
    <p style="color:yellow; font-size:30px;">这是段落</p>
</body>
</html>

结果：

3|4实例2——内部样式：在<head>标签里面通过使用<style>标签来引进CSS样式


<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>内部样式</title>
    <!--使用内部样式引入CSS-->
    <style type="text/css">
        h1{
            color:blue;
        }
        p{
            color:yellow;
            font-size:30px;
        }
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <p>这是段落</p>
</body>
</html>

结果：

3|5实例3——外部样式：先在外部新建一个外部样式表，然后在<head>标签里面通过<link>标签或通过导入进行关联


1)、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2)、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

 

样式1：同级目录下的color1.css文件

h1{
    color:blue;
}

样式2：同级目录下的color2.css文件

p{
    color:yellow;
    font-size:30px;
}

html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>外部样式</title>
    <!--使用链接式引入CSS-->
    <link rel="stylesheet" type="text/css" href="color1.css">
    <!--使用导入式引入CSS-->
    <style type="text/css">
        @import url("color2.css");
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <p>这是段落</p>
</body>
</html>

结果：


__EOF__

本文作者：cnhkzyy
本文链接：https://www.cnblogs.com/my_captain/p/9153593.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   cnhkzyy  阅读(1123)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛