前端HTML和CSS技术简介

发布于:2023-01-20 ⋅ 阅读:(16) ⋅ 点赞:(0) ⋅ 评论:(0)

二、HTML介绍

  1. 介绍
    1. HTML超文本标记[标签]语言 [HyperText Markup Language]
    2. HTML不是编程语言,就是标记标签语言,预先设定好了一套标记标签!
    3. HTML使用标签来描述和设计页面
    4. HTML组成: 标签  + 文本
    5. HTML编写的文件也称作WEB页面
    6. 学习目标:学习HTML的标签使用
  2. 作用
    1. HTML :  负责页面的整体骨架和内容,内部包含标签! 例如: 按钮,输入框,文本展示框,超链接,图片等等!
    2. CSS : 页面的整体样式设计 【怎么展示,白色的字体,黑色的背景  圆角图片等等】和页面的布局设计 【标签放置的位置】
    3. JavaScript : 负责页面的交互和业务逻辑操作
  3. 基本结构

①  HTML 基本标签

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- h1 - h6 标题,标题的级别! 越小文本越大 
             加粗
             加黑
             变大
             独占一行
        -->
        
        <h1>大家一定要注意疫情防控</h1>
        <h3>只要我们团结一心</h3>
        <h6>终有一天疫情会消失</h6>
        
        集中隔离,确保疫情不扩散,坚持动态清零政策不动摇!
        
    </body>
</html>

使用  Xbuilder

运行结果如下:

 

②HTML表格标签

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!--

展示学生信息表格

学号 姓名 年龄 性别

1 x x x

表格标签也是一个组合标签 :

table表格

width 宽度

align 对其方式 center left right

border 尺寸单位,边框的粗度

bordercolor 边框的颜色

cellspacing 边框的间隔

trtable row】 行 align left center right 一行内容对其方式

tdtable data】 列

thtable head】 自动居中,加粗 加黑

align left center right 一列数据的对其方式

-->

<table width="60%" align="center"

border="1px" bordercolor="red" cellspacing="0px">

<tr>

<th>学号</th>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

</tr>

<tr align="center">

<td>001</td>

<td>张三</td>

<td>18</td>

<td></td>

</tr>

<tr align="center">

<td align="right">001</td>

<td>张三</td>

<td>18</td>

<td></td>

</tr>

<tr>

<td>001</td>

<td>张三</td>

<td>18</td>

<td></td>

</tr>

<tr>

<td>001</td>

<td>张三</td>

<td>18</td>

<td></td>

</tr>

<tr>

<td>001</td>

<td>张三</td>

<td>18</td>

<td></td>

</tr>

</table>

</body>

</html>

运行结果如下:

③HTML的form表单标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         input  输入标签
          type : 决定标签的展示形状
              text:文本输入框
              password:隐藏显示密码内容
              radio :单选框   一组单选框的name值相同!
              checkbox :多选框  一组多选框name值相同!
              
              placeholder : 提示语
              
              name:放value对应的key,后期向后台成对传递! 自定义!
              value:向后台传递数据的值!   非输入类型的表单才会声明   
                     例如: 单选框, 多选框 ,下拉框
              
            select  下拉框   声明name属性!
               option  选项  value= 值   selected=selected   选中
         
          -->
         
         
         <br><br>
         
         <h3>用户注册</h3>
         <!-- 
             我们声明了很多的输入标签!
             但是不知道向哪提交!  
             在输入标签外套form标签!
             添加提交的时候,会自动将数据打包   key=value
             向form action 指定的后台地址提交数据!
             
             action=后台地址
             method=http 协议的提交方式    get | post
             
             区别: 
             
             1、get是从服务器端获取数据;post是修改数据
             2、get提交的数据会展现的浏览器的url中,且有长度显示;而post不会
             3、get回退浏览器是从缓存中取数据;而post是重新创建新请求
             4、get可以保存为书签;post不能
             5、get能被缓存;post不会
             6、get只允许ASCII字符;post没有限制
             7、get请求会保存在浏览器历史记录中;post不会
            
             
             -->
         <form action="#" method="get">
             <font color="red">账号:</font>
             <input type="text" name="account" placeholder="请您输入账号!">
             
             <br>
             
             <font color="red">性别:</font>
             <input type="radio" name="sex" value="male" checked="checked">男
             <input type="radio" name="sex" value="female">女
             
             <br>
             
             
         </form>
         
         
         
         
         
         
        
    </body>
</html>

运行结果如下:

 

二.CSS技术 

1.介绍:

  1. 层叠式样式表

  2. 定义HTML标签的展示样式

  3. HTML标签本身有一些样式修饰,但是比较单一,使用CSS可以随意修饰样式,样式更加丰富!

  4. CSS不区分标签,样式可以作用到所有标签

  5. CSS可以在外部定义一个样式文件.css,最终一定会引入到对应HTML文件中,并指定标签进行生效!

2.CSS代码引入方式 [css样式引入到html文件中]

  1. 行内

<!-- 行内引入css代码

<开始标签 style="css样式:样式值;css样式:样式值;"

优点:直观,省去了选择器语法

缺点:只能作用到单一标签,无法实现复用!html代码和css样式混合到一起,不方便调试!

-->

<p style="color: red;font-size: 100px;">行内加入CSS代码</p>

<p style="color: red;font-size: 100px;">再一次在行内加入CSS代码</p>

2.内部

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

/**

*

* 内部方式: 内部html文件内部编写css样式代码!

*

* head标签/style标签/css样式

优势:作用范围大于行内,一个html文件中都可以复用!

缺点:内部要写选择器,指定作用的标签了!复用范围还是小!html代码和css代码还是没有分离!

*/

p{

color: #fb5832;

font-size: 100px;

}

a{

text-decoration: none;

}

</style>

</head>

<body>

<a href="#">百度一下</a>

<p>第一个人</p>

<p>第二个人</p>

</body>

</html>

3.外部

①外部【推荐】

1.外部声明一个css文件 xxx.css

选择器{

css样式

}

2.​​​​​​​​​​​​​​html使用link标签引入css文件

link标签必须出现在head标签中

<link rel="stylesheets" type="text/css" href="网络地址|本地相对路径">