2022-8-22第一组孙乃宇


HTML和CSS

什么是HTML

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

  • HTML叫做超文本标记语言 (Hyper Test MarkerUp Language)

  • HTML不是编程语言,而是一种标记语言

  • 标记语言就是一套标记标签

  • HTML使用标记标签来描述网页

网页由谁来解析的?

浏览器

IE

firefox火狐 flash

safari webkit 苹果

chrome webkit blink 谷歌(推荐)业界的标杆

Opera 手机端

UC,360,QQ,搜狗,遨游,百度,2345

 

HTMl标记标签通常称为HTML tag

HTML标签由成对出现的尖括号包围的关键词,比如<body>

HTML标签通常是成对出现的,有例外,比如<b></b>

标签对中第一个标签是开始标签,第二标签是结束标签

结束标签是由/结束的

开始个结束标签也被称为开放标签和闭合标签

什么是网页

HTML文档描述的就是网页

HTML文档包含HTML的标签和纯文本

HTMl文档就被称为网页

web浏览器的作用就是读取HTML文档,并以网页的形式显示出他们

浏览器不会显示HTML标签,而是使用HTML标签来解释页面的内容

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <base href="http://www.baidu.com" target="_blank">  
   <title>我是title</title>
</head>
  HTML头部
  head元素包含了所有的头部信息元素。
  script,link,以及各种meta,title,base
  title:定义了浏览器工具栏的标题
  当网页被收藏夹收藏,显示的标题,默认标题
  显示在搜索引擎结构页面的标题

  base:描述了基本的连接地址或者是连接目录,作为HTML文档中所有的标签的默认地址
   <br>
   <a href="">哈哈 </a>
<hr>
  link:引用css层叠样式表
  style:定义css层叠样式表
   <hr>
  script:既可以定义script脚本,也可以引用script文件
  不建议写在head里,写在body的下方
   <hr>
  meta:元数据
  指定网页的描述,关键词,文件的最后修改时间,作者。
  可以定义搜索引擎的关键词

</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <!--
       action:数据的提交后台地址
       method:数据的提交地址
           get:默认值,会把所有要提交的数据拼接在地址栏
           post:封装一个请求体,把数据提交给后台,不会拼接在地址栏
       readonly和disabled区别:
       readonly可以提交到后台的
       disabled是不可以提交到后台的

   -->
   <form action="aaa" method="post">
       <p>账号:<input type="text" name="username" value="admin" disabled></p>
       <p>密码:<input type="text" name="password" value=""></p>
       <p>性别<input type="radio" value="男" name="gender">男
           <input type="radio"name="gender" value="女" checked>女
       </p>
       <p>地址:
           <select name="sheng" id="">
               <option value="请选择省">请选择省</option>
               <option value="吉林省">吉林省</option>
               <option value="北京市">北京市</option>
           </select>
           <select name="shi" id="">
               <option value="请选择省">请选择省</option>
               <option value="吉林省">吉林省</option>
               <option value="北京市">北京市</option>
           </select>
           <select name="qu" id="">
               <option value="请选择省">请选择省</option>
               <option value="吉林省">吉林省</option>
               <option value="北京市">北京市</option>
           </select>
       </p>
       <p>
          爱好
           <input type="checkbox" name="hobby" value="read" checked>读书
           <input type="checkbox" name="hobby" value="swim">游泳
           <input type="checkbox" name="hobby" value="run">跑步
       </p>
       <p>
           <textarea name="text" id="" cols="30" rows="10">
           </textarea>
       </p>
       <p>
           <input type="submit" value="提交">
           <input type="reset" value="登录">
           <input type="button"value="自定义按钮">
       </p>
       <p>
           <button type="button"> 注册</button>
           <button type="submit">重写</button>
           <button type="reset">自定义</button>
           <!--
               如果由from,我们就用input
               没有from,用button
           -->
       </p>
       <p>
           <input type="email">
       </p>
   </form>
</body>
</html>

CSS

什么是css?

css层叠样式表

定义如何显示HTML元素–样式

样式通常存储在样式表中

把样式表添加在HTM中,内容与表现分离

样式和结构分离

外部样式表可以极大的提高工作效率

外部样式表通常存储在css文件中

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <!--
       什么是css?
       css层叠样式表
       定义如何显示HTML元素--样式
       样式通常存储在样式表中
       把样式表添加在HTM中,内容与表现分离
       样式和结构分离
       外部样式表可以极大的提高工作效率
       外部样式表通常存储在css文件中
   -->
   <p style="">我是p标签</p>
   <span style="">我是span标签</span>
   
</body>
</html>

css选择器

CSS选择器

选择你想要的元素

1.类选择器 class=”div” 调用时 用.div

2.标签选择器,每个标签元素的id是唯一不能重复的 id=div 调用时用#div调用

3.标签选择器 p

4.通配符全部选择器 用*{}

页面初始化

5.and选择器 h1,div

6.后代选择器

div p 代表的就是div里面所有的p标签

在使用类选择器选择css样式时,可以选择多个,

中间用空格隔开即可


<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
           /* 类选择器 */
           .fontStyle {
               color: red;
               font-size: 20px;
          }
           .backgroudStyle {
               background-color: yellow;
          }
           /* id选择器,每个标签元素的id是唯一不能重复 */
           #fontStyle2 {
               color: blue;
               font-size: 30px;
          }
           /* 标签选择器 */
           p {
               font-family: "仿宋";
          }
           /* 通配符,全部选择器
              页面初始化
          */
          * {
               margin:0;
               padding: 0;
          }
           /* 组合选择器 */
           h1,div {
               font-size: 50px;
          }
           /* 后代选择器 */
           div p {
               background-color: red;
          }
           /* 子选择器 */
           div>p {
               color: blueviolet;
          }
           /* 紧跟着div的p元素 */
           div + p{
               background-color: pink;
          }
           /* 属性选择器 */
           input[name]{
               height: 100px;
               font-size: 50px;
          }
           input[name=username] {
               color: red;
          }
       </style>
   </head>
   <body>

       <input type="text" name="username">
       <input type="password" name="password">
       <!--
           CSS选择器
           选择你想要的元素
        -->
       <!-- 在使用类选择器选择css样式时,可以选择多个,中间用空格隔开即可 -->
       <p class="fontStyle backgroudStyle">我爱你中国!</p>
       <p id="fontStyle2">我爱你长春!!!</p>

       <h1>我是h1标签</h1>
       <div>我是div标签</div>

       <div>
          我是div
           <p>我是div里的p</p>
           <span>
               <p>我是div里的span里的p</p>
           </span>
       </div>
       <p>我是div后面的p</p>
   </body>
</html>

伪类选择器


<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>伪类选择器</title>
       <style>
           /* 初始状态 */
           a:link {
               color: red;
          }
           /* 鼠标悬停 */
           a:hover {
               color: green;
          }
           /* 激活状态 */
           a:active{
               color: black;
          }
           /* 访问过的 */
           a:visited {
               color: yellow;
          }
           /* 获得焦点 */
           input:focus {
               height: 100px;
               font-size: 50px;
          }
       </style>
   </head>
   <body>
       <a href="2">超级链接</a>

       <input type="text">
   </body>
</html>

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/281682.html

(0)
上一篇 2022年8月22日
下一篇 2022年8月22日

相关推荐

发表回复

登录后才能评论