本文共 3175 字，大约阅读时间需要 10 分钟。

day01_web

一、Web前端介绍

1. 什么是网页

网页是基于浏览器的应用程序，是数据展示的载体.

2. 网页的组成

1. 浏览器
   • 代替用户向服务器发请求
   • 接收并解析数据展示给用户
2. 服务器
   • 存储数据
   • 处理并响应请求
3. 协议
   • 规范数据在传输过程中的打包方式

3. 开发前的准备

1. 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
2. 调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
3. 开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、PyCharm等）

二、 HTML语法介绍

1. HTML介绍

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容 定义 作用 适用性 语法

2. 标签

标签也称为标记或元素，用于在网页中标记内容

1. 语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示

2. 分类：

   • 双标签：成对出现，包含开始标签和结束标签。例：
   • 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：

3. 标签属性：

   • 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
   • 同一个标签中可以添加若干组标签属性，使用空格间隔。例：

3. 使用

1. 创建网页文件，使用.html或.htm作为文件后缀
2. 添加网页的基本结构

   					
        		         网页主体内容	

3. 标签嵌套
   在双标签中书写其他标签，称为标签嵌套
   • 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
   • 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
   • 平级结构互为兄弟元素
4. HTML语法规范
   • 标签名不区分大小写，建议使用小写
   • 注释语法：

三、常用标签介绍

1. 基本结构解析

    
      
           
               
         
        
            网页主体内容  
   

2. body中常用标签

• 文本标签

  • 标题标签：自带加粗效果，从h1到h6字体大小逐级递减 被空行包围

  一级标题
   
  二级标题
   
  三级标题
   
  四级标题
   
  五级标题
   
  六级标题

  • 段落标签：被空行包围

  段落文本

  • 普通文本标签：

  行分区标签，用于对特殊文本特殊处理加粗标签强调标签，效果同b标签普通文本标签，常与表单控件结合实现文本与控件的绑定斜体标签删除线标签

  • 格式标签：
    浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
  • 水平线标签，在页面中插入一条水平分割线
  • 字符实体：
    某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
    例：

  使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用   在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"￥"

• 容器标签

  常用于页面结构划分，结合CSS实现网页布局

       
        页面顶部区域
       
       
        页面主体区域
       
       
        页面底部区域
       

• 图片与超链接标签

  • 图片标签 ：用于在网页中插入一张图片。

    1. 属性 src 用于给出图片的URL，必填。
    2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
    3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
    4. 属性 alt 用于设置图片加载失败后的提示文本

    语法：
  • 超链接标签：用户可以点击超链接实现跳转至其他页面
    1. 属性 href 用于设置目标文件的URL，必填。
    2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

  淘宝百度

3. 常用结构标签

• 列表标签

  • 有序列表（ordered list）被空行包围
    默认使用阿拉伯数字标识每条数据

       
     
        
  list item 列表项
      
        
  list item 列表项
     
        
  list item 列表项
       

  • 无序列表（unordered list）被空行包围
    默认使用实心圆点标识列表项

       
   	
        
  list item 列表项
    	
        
  list item 列表项
   	
        
  list item 列表项
   
       

  • 列表嵌套
    在已有列表中嵌套添加另一个列表，常见于下拉菜单

       
     
        
     	西游记   	
         
     		
          
  孙悟空
     		
          
  孙悟空
     		
          
  孙悟空
     	
         
     
       

• 表格标签

  • 表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

       
       
  	       	      
         
  		        		        
  姓名
  		        
  年龄
  		        
  班级
  	       
  	       
  		        
  迪丽热巴
  		        
  20
  		        
  002
  	       
        
       

  • 单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

    单元格属性	作用	取值
    colspan	跨列合并单元格	无单位数值
    rowspan	跨行合并单元格	无单位数值

  • 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中

• 表单标签

  表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。
  • 表单使用
    | 属性名 | 取值 |
    | ------- | ------------------------------------------------------------ |
    | action | 设置数据的提交地址 |
    | method | 设置数据的提交方式，默认为get方式，可以设置为post |
    | enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data" |
    例如：
  • 表单控件使用（重点）
    表单控件用于采集用户信息，可设置以下标签属性

  属性名	取值
  type	设置控件类型
  name	设置控件名称，最终与值一并发送给服务器
  value	设置控件的值
  placeholder	设置输入框中的提示文本
  maxlength	设置输入框中可输入的最大字符数
  checked	设置单选按钮或复选按钮的默认选中
  selected	设置下拉菜单的默认选中

表单控件用于采集用户信息，常用控件如下：

  文本框    密码框    单选按钮    复选框    文件上传   普通按钮    提交按钮    下拉菜单   文本域 重置            选项        

属性和属性值

ct> 下拉菜单

## 属性和属性值```html
       
       
   

转载地址：https://blog.csdn.net/z_202041/article/details/117911871 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！