前端--html5

 day01
        基础学习路线:PC端网页布局(html5+css3+提高+电商网站)
        
        html: 1、能够说出网页的基本组成
                   2、能够说出什么是HTml
                   3、能够说出常用的浏览器
                   4、能够说出Web标准的三大组成部分
               
               
        网页:什么是网站? :网页集合 网页:网站中一页,html文件,由图片链接、文字、视频等组成
        html:超文本标记语言,一种编程语言
        超文本:1、可以加入图片、声音、动画、多媒体等内容2、可以从一个文件跳转到另一个文件,与世界主机的文件链接(超级连接文本)
        常用浏览器:IE firefox chrome safari opera
        内核:读取网页内容,整理讯息,计算网页的显示方式并显示页面
            IE:trident IE 360 百度
            firefox: Gecko
            safari:webkit
            chrome: blink blink是webkit的分支
        
        web标准构成:结构 HTml:网页元素进行整理和分类、
          表现 css:用于设置网页元素的版本、颜色、大小
                       行为JS:网页模型的定义和交互的编写
        
        
        Html标签:1、能够说出标签的书写注意规范:尖括号,双标签 单标签
                    2、能够写出HTml骨架标签
                    3、能够写出超链接标签
                    4、能够写出图片标签并说出ALt和title的区别
                    5、能够说出相对路径的三种形式
                  
                 标签关系:包涵、并列
                 根标签:html 头:head 标题:title 主题:body
                
        开发工具:DW VScode (先保存)
                  VS基本使用、推荐插件安装:Chinese openinbrowser autorenameTag Csspeak
                
        
        部分标签:1、<!DOCTYPE>:文档类型声明标签,作用告诉浏览器使用哪种html版本显示网页
                   2、lang :用来定于当前文档显示的语言 en:英文网站 zh-CN定义语言为中文网站、英文也可以显示
                   3、charset:字符集:以便计算机能够识别和存储各种文字
                          <meta charset="UTF-8"/>
                      常用值:GB2312、GBK、UTF-8
                  
        好多标签语义:标签用来干嘛的
                    
                     1、标题标签<h1>-<h6> 1)加了标题的文字会变得更粗、字号依次变小2)标题独占一行
                     2、段落标签:<p></p> 1)段落会根据浏览器窗口大小自动换行 2)段落和段落之间保留空隙
                     3、换行标签:<br /> 1)单标签 2)比段落之间距离小
                     4、文本格式化标签:对文字设置粗体、斜体、删除线、下划线等
                        <strong> <b>  <em><i> <del><s> <ins><u>
                     5、<div>分割<span>跨度 没有语义,用来存放内容 1)div用来布局,一行只能放一个<div>大盒子 2)span一行可以放很多个,小盒子
                     6、图像标签:<img src="图像url">
                            路径:相对路径引用文件为参考(同级、下一级/、上一级../)、绝对路径
                            属性:1)alt:替换文本、图像不能显示用文字替换
                                    2)title:鼠标放到图像上,提示的文字
                                    3)src:必须属性
                                    4)width:设置宽度
                                    5)height:设置高度
                                    6)border:给图像设定边框
                            注意事项:1)图像标签可以有多个属性必须下载标签名的后面
                                       2)属性之间不分先后顺序
                                       3)属性采用键值对的格式
                     7、超链接标签:<a>:从一个页面连接到另一个页面
                                       <a herf="跳转目标" target="目标弹出的方式”> 文本或图像</a>
                                    属性:1)herf:必须属性用于指定连接目标的url地址
                                            2)target:用于连接页面的打开方式 —_self默认值 _blank在新窗口打开方式
                                    链接分类:1)外部链接<a herf=“http://www.qq.com" target="_blank">腾讯</a>
                                               2)内部链接:网站内部网页链接<a herf="1.html">内部</a>
                                               3)空链接:herf=“#”
                                               4)下载连接:herf连接exe或者压缩包等herf=“1.zip”
                                               5)网页元素链接:文本、图片、音频<a herf="http://www.baidu.com"><img src="img.jpg></a>
                                               6)锚点链接:点击链接可以快速定位到页面中的某个位置
                                                    1>在链接文本的herf属性中,设置属性值为#名字的形式 <a herf="#two">第二集</a>
                                                    2>找到目标位置标签,里面加一个id属性=刚才的名字,<h3 id="two">第二集介绍</h3>
                       8、注释标签<!-- -->ctrl+/
                    
        特殊字符
                1、空格符:&nbsp
                2、小于号:&it 大于号:&gt
                
                
day02
    目标:1)能够书写表格
            2)能够写出无序列表
            3)能够写出3-4个常用input表单类型
            4)能够写出下拉列表表单
            5)能够使用表单元素实现注册页面
            6) 能够独立查阅W3C文档
    内容:1)表格标签
            2)列表标签
            3)表单标签
            4)综合案例
            5)查阅文档
          
         部分标签:
                表格标签:用于显示、展示数据
                        基本语法:<table>表格 <tr>一行 <td>单元格
                    1、表头单元格标签<th>加粗居中显示
                    2、css设置table表格属性:1)align居中:left、center、right
                                             2)boder:边框 =1
                                             3)cellpadding:字和边框的距离
                                               4)cellspacing:单元格与单元格之间的距离
                                             5)width:像素宽
                    3、结构标签:1)<thead>:头部区域
                                  2)<tbody>:主体部分有更好的语义
                    4、合并单元格:1)跨行 rowspan竖着
                                    2)跨列 colspan横着
                                    3)目标单元格 跨行,上面的 跨列,左边的
                                    4)<td colspan="2"></td>  删除多余的单元格
                 列表标签:用于布局整齐有序
                        分类:无序列表、有序列表、自定义列表
                    1、无序列表:<ul><li></li></ul>    
                                1)ul的儿子只能是li
                                2)li可以作为容器放很多东西
                                3)没有顺序,等级并列
                                4)无序列表有自己的样式属性,在实际使用时,用css来设置
                    2、有序列表<ol><li></li></ol>
                    3、自定义列表,最底测:用于对术语或名词进行解释和描述
                            <dl>
                                <dt>名词</dt>
                                <dd>名词解释1</dd>
                                <dd>名词解释2</dd>
                            </dl>
                  表单标签:收集用户信息:表单域、表单控件、提示信息
                     1、表单域:把用户信息交给服务器
                          <form>标签用于定义表单域
                          <form action="url地址” method=“提交方式” name=“表单域名称”></form>
                        属性:1) action:用于只能接受信息服务器地址
                              2)method:提交方式
                              3)name:用于指定表单的名称,以区分容一个页面中的多个表单域
                      2、表单控件:1)输入:<input type="属性值"/>
                                            text:文本框
                                            password:密码框
                                            radio:单选按钮多选一
                                            checkbox:复选框
                                            submit:提交按钮,把表单域送给后台
                                            reset:可以还原表单元素初始默认状态
                                            button:按钮,不提交数据,后期介个js搭配使用
                                            file:上传文件
                                        <input 其他属性>
                                            name:表单元素名字,用相同name区分单选框
                                            value:规定input元素的值
                                                        主要给后台人员使用
                                            checked:单选框和复选框默认状态 checked=“checked”
                                            maxlength:规定输入字符最大长度
                                 2)<lable>标签:增加光标范围,绑定表单元素
                                        <lable for=“sex">男</lable>
                                        <input type="radio" name='sex" id="sex"/>
                                        lable标签里的for属性应当与相关元素的id属性相同
                                        
                                 3)下拉元素<select>表单元素
                                        <select><option></option></select>
                                            1>至少有一对select 2>secleted="selected"为默认选定
                                 4)textarea文本域:特大号文本框
                                    <textarea cols="50" rows="5">  </textarea>
                                  
        查阅文档        w3school

posted @   风中凌乱的猪头  阅读(47)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示