2024年WebUI自动化必备技能-HTML和css知识详解_html和css课程主要技能，2024年最新膜拜大牛

本文链接：https://blog.csdn.net/2401_84563254/article/details/138553648

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<!DOCTYPE html>

<html>

     <head>

         <meta charset="UTF-8">

         <title>码同学教育</title>

     </head>

     <body>

       华测教育

     </body>

</html>

用来声明当前的文档类型是html
html：是网页当中最大的标签，我们称之为根标签

head：称之为网页的头部，它里面的内容主要用来定义网页标签及给浏览器查看的一些信息

UTF-8：用来定义网页的编码标准，国际编码

title：称之为网页标题标签，它里的内容会显示在浏览器的标签页上

body：称之为网页主体标签，它里面的内容都会显示在浏览器的白色窗口区域

2、基本HTML标签

HTML标题

<h1>一号标题</h1>

<h2>二号标题</h2>

<h6>六号标题</h6>

HTML段落

<p>这是一个段落 </p>

<p>这是另一个段落</p>

HTML超链接

<a href="https://kaiwu.lagou.com/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;华测</a>

HTML图片

<img src="lagou.png"  title="华测教育"  alt='logo' with='110' height='150' />

HTML空格和回车

<div>&nbsp;我是一个块元素&nbsp;</div>

<br />

<span>我是一个内联元素,存放文本容器</span>

3、HTML表单

web网页手机用户输入数据，包含不同类型：文本输入框、单选框、复选框、下拉框、提交按钮

文本输入框

<body>

   <form>

      firstname: <input type="text" name="fristname">

      <br>

      lastname: <input type="text" name="lastname">

</form>

密码输入框

<form>

     Password: <input type="password" name="pwd">

</form>

单选按钮

<!--单选按钮 --> 

<form>

<input type='radio' name="sex" value="male" "/>男

<input type="radio" name='sex' value='female' />女

</form>

复选框

<!---- 复选框--> 

<form>

<input type="checkbox" name="hobby">读书

<input type="checkbox" name="hobby">听音乐

<input type="checkbox" name="hobby">看电影

</form>

下拉框

<!--  下拉框 --> 

<select name="city" id="city">

<option value="bj">北京</option>

<option value="sh">上海</option>

<option value="gz">广州</option>

<option value="sz" selected="selected">深圳</option>

</select>

提交按钮

提交按钮：<input type="submit" value="提交按钮" />

`02 熟悉CSS常见选择器`

CSS：指层叠样式表

作用：

用来定义如何显示HTML元素（定义HTML元素的样式），就像 HTML 中的字体标签和颜色属性所起的作用那样

.css 文件中，我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观

选择器：是用来指定要改变样式的HTML元素，每条声明由一个属性和一个值组成

属性：代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开

CSS：声明总是以分号(;)结束，声明以大括号({})括起来在HTML文档中，可以把样式定义在标签中

在CSS中，选择器是一种模式，用于选择需要添加样式的元素

常用的CSS选择器有：id选择器、class选择器标签选择器、属性选择器、后代选择器、元素选择器

`1、ID选择器`

id选择器是通过元素的id属性来选择元素

CSS中id选择器以 “#” 来定义，比如： #test

<!DOCTYPE html>

  <html>

    <head>

      <meta charset="utf-8">

      <title>CSS</title>

     <style>

       /*这是一个关于样式注释*/


     </style>

   </head>

   <body>

   <p id = 'test'>Hello World!</p>

   </body>

</html>

在整个HTML文档中id属性必须是唯一的

注意：HTML文档不会严格校验id属性是否唯一，在不规范的HTML文档中会出现id重复的情况！

`2、Class选择器`

class选择器是通过元素的class属性来选择元素，又称类选择器，使用class选择器时，要求元素必须有class属性

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用CSS中class选择器以 “.” 来定义，比如： .center

<!DOCTYPE html>

   <html>


![img](https://img-blog.csdnimg.cn/img_convert/a16ab40697e8576a06142d5c473c7da8.png)
![img](https://img-blog.csdnimg.cn/img_convert/76e37982d1cb4372e80b5e033c89cdbb.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

111511223)]
[外链图片转存中...(img-fBWZWgYH-1715111511223)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**