Web前端技术-HTML

• 一、web前端标准

• HTML结构标准
• css样式标准
• js行为标准

二、五大浏览器厂商

1. ie
2. 谷歌
3. 火狐
4. 苹果
5. 欧朋

6.      注意：其它浏览器都是用的别人浏览器的技术，自己换了一套皮肤而已。

   三、html定义

   超文本标记语言

   四、第一个html页面

   
   
   	
   		
   		
   	
   	
   		hello world
   		
   		代码都在body标签中
   	
   

   1、  描述当前文件的版本信息，如果没有详细说明4.0还是x1.0那就 是5版本

   2、html文件

   3、网页的头部

   4、 utf-8是国际编码的意思，如果不写，或者写成其它都会有问 题。

   5、

   6、我们自己写的所以代码都放在这里

   注意：html文档不能正常识别回车和换行，只能使用特定代码来实现；标签、标记、节点、元素都是尖括号。

   五、标签语义化

   在合适的地方使用合适的标签；（该放p就放p）

   为什么要标签语义化：因为浏览器只认识标签，没有语音语调，所以想表达的的东西只能使用对应的标签来表示；

   标签语义化的好处：语义化做的好，可以让搜索引擎把你的网站排名更靠前。

   六、h和p标签

   
   
   	
   		
   		
   	
   	
   		
   我是h1标签
   		
   我是h2标签
   		
   我是h3标签
   		
   我是h4标签
   		
   我是h5标签
   		
   我是h6标签
   		
   p代表这里是文章段落
   	
   

    有六个1到6依次变小，代表文章标题

   代表文章

   七、bui和小伙伴  

   
   
   	
   		
   		
   	
   	
   		我是b 代表加粗
   		
   
   		strong是加粗 可以代表强调的语义
   		
   
   		我是u 代表下划线
   		
   
   		我是i 代表倾斜
   		
   
   		我是em 也是倾斜 多了强调的语义
   		
   
   		我是s 代表删除线 这种写法被渐渐淘汰
   		我是del也代表删除线 这种写法是主流
   		
   	
   
   

   代表加粗

   也代表加粗，多了强调的语义

   代表下划线

   代表倾斜

   也代表倾斜，多了强调语义

   代表删除线

   也代表删除线，建议使用del代表s

   注意：strong代表特别强调，一篇文章中不要出现多次；em代表一般强调，一篇文章中可以出现多次；

    
   单标签 代表一个换行回车

   八、img图片标签  

   
   
   	
   		
   		
   	
   	
   		正常的图
   
   		
   
   		设置了宽高的图
   
   		
   
   		等比例缩放:宽或高设置其中一个 另外一个就等比例缩放了
   
   		
   
   		有提示文本的---鼠标悬停的提示文字
   
   		
   
   		1、图片没有加载出来的时候才出现的文字 2、可以让网页阅读器把alt中的文字念出来 为了视障用户名的体验
   这是一个人
   
   		
   	
   

   img是一个单标签

   

   注意：

   ·属性名=”属性值” 属性名=”属性值”

   ·空格不能丢，符号都要使用英文状态下，属性设置不分先后

   ·宽高设置其中一个，另外一个就等比例缩放

   九、路径

   相对、绝对路径

   十、链接

   
   
   	
   		
   		
   	
   	
   		
   		跳转到百度官网
   
   		
   		我想跳转到02文件
   
   		
   		我想新窗口打开
   		
   我是文字
   		
   我是文字
   		
   我是文字
   		
   我是文字1111111
   		
   我是文字
   		
   我是文字
   		
   我是文字
   		
   我是文字
           
   我是文字
   		
   我是文字22222
   		
   		我还不知道点击之后跳转到哪里 
   
   		我还不知道点击之后跳转到哪里javascript
   
   		我还不知道点击之后跳转到哪里javascript void
   		
   		我想跳转到某位置
   		
   asdasd
   		
   asdasd
   		
   asdasd
   		
   asdasd
   	
   
   

   文字

   注意：如果要跳转到线上地址，必须加http://，本地文件直接写路径；

   空链接写法：1、###    2、javascript:;    3、 javascript:void(0); 这三种都可以

   锚点链接：点击之后可以跳转到页面的对应位置；给像跳转到的位置写一个id属性，a标签中的href属性写#id的值

   十一、表单

   
   
   	
   		
   		
   	
   	
   		
   		
   
   			
   		    昵称： 
   
   			昵称： 
   
   			
   			
   			密码： 
   
   			性别： 男
   				   女
   				   保密
   
               地址：
   			    
   				    0
   				    1
   				    2
   				    3
   				    4
   				    5
   			    
   			    
   				    
   					    朝阳
   					    东城
   					    西城
   				    
   				    
   					    罗湖
   					    福田
   					    宝山
   				    
   			    
   	
               介绍：
   			    
   			    
   
   			爱好：
   			     测试
   			     编程
   			     睡觉
   			     吃饭
   
   			    
   			    
   			    
   			    按钮
   
   		
   	
   
   

   所有用户输入的内容都要放在form标签中

    method=”post”>

   ·action 代表数据给那个后台程序；

   ·method 代表传输数据的方法1、post（加密）2、get（不加密）；

   ”” id=”” value=””/>

   ·input 代表输入框标签（单标签）

   ·type 类型决定这个输入框的类型

         type=”text”  代表普通输入框

         type=”password”  代表密码输入框，输入的文字加密

7. 1.       type=”checkbox” 多选框

            type=”radio” 单选按钮

            radio” name=”sex” id=”nan” /> ”nan”>男

            注意：如果想让文字点击能切换，要加label标签，并且设置for属性和对应的单选按钮的id属性值一致；必须给这一组单选按钮添加name值，才能实现单选效果；设置默认选中状态，要给单选按钮添加checked=”checked”

            type=”submit” 提交按钮

            注意：必须设置value属性，浏览器有兼容性问题

            type=”reset” 重置按钮

            注意：设置value属性，恢复刷新后默认状态

             type=”button” 或 按钮

   2. ·name 属性代表 这个输入框的名字

      ·id 代表输入框的id编号

      ·value 代表默认输入框（不符合用户体验、应该换成placeholder）

      注意：placeholder属性ie低版本不兼容，但是我们实际工作中还要使用，因为渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本浏览器显示效果好的前提下，保证了低版本浏览器不错乱）

   3. 下拉菜单 select和option的组合

      
          
              朝阳
              东城
              西城
          
      

      注意：如果要设置多组下拉菜单，要添加optgroup标签，并设置label属性作为提示文字；设置默认选中状态，要给对应的option添加selected属性

      文本域

      textarea标签来设置多行文本（文本域）

      注意：不能使用cols、rows来设置宽高，要用width、height来设置；可以使用placeholder来设置默认提示文字