篇章二 走进HTML

一、系统架构

1、B/S架构（Browser / Server）

• 浏览器 / 服务器的交互形式
• 优点：升级方便，只升级服务器端代码即可
• 缺点：速度慢、体验不好、界面不炫酷
• 代表：京东、天猫、百度。。。

2、C/S架构（Client / Server）

• 客户端 / 服务器端的交互形式
• 优点：速度快、体验好、界面炫酷
• 缺点：升级麻烦，维护成本较高
• 代表：QQ、微信、支付宝。。。

二、HTML 基础知识学习

HyperText Markup Language（超文本标记语言）
不是编程语言
告诉浏览器如何构造网页

1、HTML 是谁指定的

• W3C：世界万维网联盟，Word Wide Web，W3C指定了HTML规范，每个浏览器生产厂家都会遵守规范。
• HTLML规范目前最高的版本：HTML5.0
• W3C制定了很多协议：HTML、XML

2、HTML基本结构

3、HTML基本标签

• p标签：段落标签
• ：标题字，

  居中

• 
：换行，独目标签

• ---

  ：横线，独目标签

• ：预留格式

• ：删除字
• ：插入字
• ：粗体字
• ：斜体字
• ：上角标
• ：下角标
• <：小于号
• >：大于号
•  、&npsb：空格

3.1 表格

![在这里插入图片描述](https://img-blog.csdnimg.cn/de903f58edab4ed5be7d6102c817c96d.png)

• 单元格合并
  

  
  

3.2 图片

• 在设置图片宽度和高度时，只设置宽度，高度会进行等比例缩放
• title设置鼠标悬停时显示的信息
• alt设置图片加载失败时显示的提示文字

3.3 表单

• form表单的name属性
  • 需要提交给后台的才需要有name
  • 不需要提交给后台的数据不需要加name
• form 表单的method属性
  • get：提交的信息会在浏览器地址栏显示
  • post：提交的信息不会显示在浏览器地址栏
• form 表单的value属性
  • 提交用户输入的内容不需要加value
  • 提交用户选择的内容（该内容不能是用户输入的，比如选择框、下拉列表）需要加value
• from 表单中单选按钮默认选择
  • checked
• form 表单中下拉框的默认选择
  • selected
• form 表单中的
  • 表示不需要用户看到，但需要提交给后台的数据
• 当input的type为file时，form表单需要添加 enctype="multipart/form-data
• novalidate作用与form标签，表示提交信息时不做该表单的信息提交，即不提交给后台信息
• autocomplete="on/off" 表示是否自动提示历史记录

"" method="post" enctype="multipart/form-data">
	"file"/>
	"">用户名
	
	
	
	"text" name="userName" placeholder="请输入用户名" required autofocus/>
	"">工号
	"text" name="userNum" placeholder="请输入工号" pattern="^\d{5}[imooc]$"/>
	"submit"/>
	"reset"/>

• label中的for属性

  "man">男
  "radio" name="sex" id="man" required/>
  "woman">女
  "radio" name="sex" id="woman" required/>
  

• 下拉列表

  "text" list="tips"/>
  
  

4、HTML5表单约束验证API

• willValidate 属性，元素约束是否被符合，不符合返回false
• validity 属性，当前元素所属的验证状态 id.validity
• validationMessage 属性，描述元素失败的相关信息
• checkValidity()方法，如果元素没有满足它的任意约束，返回false，其他情况返回true
• setCustomValidity()方法，设置自定义的验证信息，用于即将实施与验证的约束来覆盖定义的信息，设置和预定义提示信息

"" method="post"">
		
		
		
		
	

5、自带验证美化之伪类和选择器介绍

• 点击必填项和非必填项后出现不一样的边框样式

  
  
  	
  		
  		
  		
  	
  	
  		
  "container">
  			"name" required/>名称
  			"email" required/>邮箱
  			"tel" />手机
  			"url" />网址
  			"#">
  				"1">非必填选项一
  				"2">非必填选项二
  				"3">非必填选项三
  				"4">非必填选项四
  			
  			"#"</span> cols=<span class="token string">"30"</span> rows=<span class="token string">"10"</span> placeholder=<span class="token string">"留言(必填)"</span> required>
  			"submit" value="提交表单"/>
  		
  	
  
  

6、自带验证美化之伪类和选择器介绍

• 选中输入框后实现动态效果

  
  
  	
  		
  		
  		
  	
  	
  		
  "container">
  			"mail" type="email" required placeholder="输入邮箱"/>
  			"title"> 邮箱
  			"mail">
  
  		
  	
  	
  
  

界面交互设计文档

• 解释：让交互设计师能够将界面承载不了的信息通过文档沉淀下来，降低项目里的沟通成本和风险。

三、HTML编写规则和语义化写法

1、使用工具

1.1、浏览器

• Google Chrome
• Mozilla Firefox
• Edge
• 强烈拒绝IE、360浏览器、遨游、QQ浏览器等作为开发浏览器

1.2、编辑器

• Visual Studio Code
• WebStorm
• Hbuilder
• SublimeText