前端开发基础（一）——HTML

目录

一.认识WEB

二.HTML初识（超文本标记语言）

三.HTML常用标签

四.表格

五.列表和表单

六.综合实例 

七.HTML思维导图

---

一.认识WEB

• 浏览器内核举例：

1. 苹果：Safari（WebKit）       
2. 谷歌：chrome-Blink（WebKit分支）       

• 安卓手机大部分是 WebKit 内核
• 浏览器不同→内核不同，显示页面有差异，所以要遵循 WEB标准（W3C万维网联盟制定）
• WEB标准构成： 结构（Structure = HTML）、表现（Presentation = CSS）、行为（Behavior = JavaScript）
• 三层独立，.html，.css，.js 放在不同的文件夹里

二.HTML初识（超文本标记语言）

• HTML作用：网页由网页元素组成 ， 元素用 html标签描述，通过浏览器解析，显示给用户
• HTML标签语义化 = 标签的含义
• 字符集编码：UTF-8 基本包含全世界所有国家需要用到的字符
• 骨架标签 总结：

 

三.HTML常用标签

• 排版标签：

1. 标题标签

2. 段落标签

3. ---

   水平线标签
4. 
   换行标签

• div和span标签（重点）：没有语义，网页布局的两个主要盒子

1. ：一行只能放 一个div
2.  ：一行上可以放 好多个span

• 文本格式化标签：

1. 加粗    加粗 推荐第二种
2. 倾斜    倾斜 推荐第二种

• 图片标签：

1. alt属性：当图片加载失败显示的文字
2. title属性：当鼠标移动到图片上显示的文字

带边框border、有提示文本title、有替换文本alt

• 链接标签：

1. 外部链接：需要添加 http:// .....
2. 内部链接：链接内部页面名称，比如 < a href="index.html"> 首页
3. 没有确定链接目标时，href="#"，表示该链接暂时为空

文本或图像

• 路径分类：
• 相对路径：

1. 同级路径：输入图像文件名，如
2. 上一级路径：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”， 如
3. 下一级路径：图像文件位于 html文件同级文件夹下，如

• 绝对路径：用的少，注意写法，特别是符号 \， 并不是 相对路径的 /
• 锚点定位：创建锚点链接，能快速定位到目标内容，如百度点击目录，跳转到相应文本区

  
第2集
 

     

• base标签：

1. base 写到 之间
2. 把所有的连接都默认添加 target="_blank"（不关闭原来的页面，在新窗口打开链接）

四.表格

• 作用：展示表格式数据，让数据规整，可读性好

• 基本语法：表格只有行、单元格的概念，没有列的概念

  
 表格名字，caption标签必须紧紧跟在table后面 
  
  

    
    
 单元格内的文字 
  

• 表格属性：
• cellpadding：单元格里的内容距离边框多少
• cellspacing：单元格间距是多少
• align：整个表格在页面中的位置

   
  
姓名
   
性别
 
年龄
  
   
  
刘德华
 
男
 
55
  

• 合并单元格（重要）：

1. 跨行合并：rowspan="合并单元格的个数"
2. 跨列合并：colspan="合并单元格的个数"

• 合并过程三部曲：

1. 先确定是 跨行还是跨列 合并
2. 根据 先上 后下 先左 后右的原则找到 目标单元格 然后写上 合并方式 还有 要合并的单元格数量
3. 删除 多余的单元格 单元格

		
 个人简历 
		

			
刘德华
			
男
			
18
			
			
照片
		
		

			
身高 180
			
汉族
			
已婚
			
		
		

			
个人作品
			
			
个人作品
		
		

			
个人简历
			
个人简历
		
	

•  效果：

五.列表和表单

• 列表：

1. 中只能嵌套
，输入其他标签或文字是不被允许的
4. 与
之间相当于一个容器，可以容纳所有元素

  
列表项1
 


  
列表项1
 


  
名词1
  
名词1解释1
  ...
  
名词2
  
名词2解释1
  
名词2解释2

• 表单，为了收集用户信息，其构成如下：

1. 表单控件（表单元素）：文本输入框、密码输入框、复选框、提交按钮、重置按钮等
2. 提示信息：说明性的文字，提示用户进行操作
3. 表单域：form 相当于容器，容纳表单控件、提示信息，让表单数据传送到后台服务器

• input控件（单标签）：

用户名: 


男
女 

• label标签：绑定表单元素, 点击 label标签 的时候, 被绑定的元素会获得输入焦点
• 绑定表单元素方法：

1. 用 label直接包括 input表单
2. for 属性规定 label 与哪个表单元素绑定 for/id 组合

 用户名：    

男

• Select下拉列表（现在应用很少）：

  选项1

• form表单域：实现用户信息的收集传递，form中的所有内容都会被提交给服务器
• 当 reset重置/submit提交 在form中时，才会起到效果

  表单控件

六.综合实例 

    
    


    
    

    
    

        
性别
        

           
             男
            女
        
        
    
        

            
生日
            

                
                            请选择年
                            1990
                            ...
                
                
                                请选择月
                                1月
                                ...
                
                
                                    请选择日
                                    1
                                ...
                
            
        
    
        

            
所在地区
            

                
            
        
    
        

            
婚姻状况
            

                
                 未婚
                 离婚
                 丧偶
            
        
    
        

            
学历
            

                
            
        
    
        

            
月薪
            

                
            
        
    
        

            
手机号
            

                
            
        
    
        

            
昵称
            

                
            
        
    
        

            
喜欢的类型
            

                
                 妩媚
                 柔美
                 可爱
                ...
            
        
    
        

            
自我介绍
            

                
                
            
        
    
        

            
            

            

                
                
            
        
     
        

            

            

                
                我同意注册条款和会员加入标准
            
        
     
        

            

            

                我是会员，立即登录
            
        
     
        

            

            

                
 我承诺
                

                    
年满18岁、单身
                    
抱着严肃的态度
                    
真诚寻找另一半
                
            
        
    

效果展示：

七.HTML思维导图