码迷,mamicode.com
首页 > 其他好文 > 详细

前端介绍开始(—)

时间:2018-09-30 20:07:21      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:通过   有序   必须   html   大写   asp   editplus   ado   换行   

web 的组成
    浏览器
    服务器:代替用户向服务器发送请求
    通信协议:规范数据传输及打包方式(http,https)
服务器:
    1 作用:
        1 接收用户请求并响应 
        2 存储数据
        3 具有安全性功能
    2 产品:
        1 Tomcat
        2 Aapache
        3 Nginx
        4 IIS
    3 技术:
        1 python web (django flash ,tornado)
        2 PHP
        3 JAVA
        4 ASP.net
        5 JSp (java serverlet page)
    4 浏览器:
        1 作用:
            1 代替用户向服务器发送请求
            2 作为响应数据的解释引擎,呈现图形化界面
        2 主流的浏览器产品:
            1 Chrome -- Google 公司
            2 IE    --    microsoft
            3 safari -- Apple
            4 Firefox -- Mozilla
            5 Opera --Opera
        3 浏览器引擎(内核)
            1 渲染引擎 - 解析 HTML 。css.控制而面渲染效果
            2 js 引擎 -- 解析js 脚本
        4 前端技术
            1 HTML    书写页面结构和内容
            2 CSS    设置网页中的元素的样式
            3 JS     实现网页的交互
            4 工具库,框架
2 html 概述
    1 html介绍
        HyperText Markup Language
        超文本        标记    语言
    2 超文本:
        具有特殊功能文本
        et:
            普通文本 a
            超文本 a 表示超链接
            普通文本 b
            超文本 b 表示加粗
    3 标记
        1 也叫标签。元素
        2 主要用来标记网页中的内容
        3 可以实现网页布局及JS交互
    4 HTML 在计算机中的表现形式
        网页文件在计算机中都是以.html/ .htm 后缀表示
        工具
            1 记事本
            2 EditPlus Sublime WebStorm Vscode
        运行工具:浏览器 以Chrome 浏览器为准
        调试工具:浏览器开发者工具 F12
        
        1 HTML 中的标签都以<>为标志
        2 标签分类
            1 双标签:成对出现,有开始标签,有结束标签
                 <html></html>
            2 单标签:
                <hr> 水平线
                <hr/>
            3 标签嵌套
                1 在嵌套结构中,外层标签称为“父元素‘,内层元素称为’子元素‘
                    多层元素时,内部元素称为后代元素
                    head
                        网页头部信息:编码方式,网页名称
                        网页选项卡的小图标,网页信息介绍
                        引入外部资源文件
                    body 
                        网页的主体信息:所有需要呈现给用户的,需要显示在窗口中的内容,都应在body中书写
            4 标签属性
                标签属性主要是用来修饰当前标签的显示效果,对当前标签或者网页的补充设置
                语法:
                    1 书写位置:
                        标签属性都书写在开始标签中,与标签名之间使用空格隔开
                    2 属性是由属性名和属性值组成的
                        属性名= ‘属性值’
                        属性值必须使用引号引起来,单双引号都可以
                    3 多个属性时,属性之间使用空格隔开
            5 HTML 语法规范
                1 HTML 不区分大小写 (推荐使用小写)
                2 保持适当缩进,保证代码可读性
                3 保持适当注释,保证代码可读性
            6 HTML注释
                <!-- 注释内容 -->
                注意 :
                    1 HTML 注释不能嵌套
                    2 不能书写在标签内部的
            7 HTML 中的换行与空格
                1 HTML会忽略多余的空格,只显示为一个空格
                2 代码中
4 文档组成
    1 文档类型声明
        <!DOCTYPE html> 声明当前为HTML文档 ,这种H5 的声明方式    
        作用:    
            1 告诉浏览器文档为html文档
            2 按照H5的渲染方式解析网页
        书写位置:
            文档开头:<html>标签之前
    2 文档内容
        <!doctype html>
        <html>
            <head>
                <meta charset=‘utf-8‘>
                <title>网页标题</title>
            </head>
            <body>
                网页主体
            </body>
        </html>
5 常用标签
    1 标题标签
        1 作用:以标题的形式显示文本(加粗,字号不同)
        2 语法:
            <h1></h1> 一级标题
            ....
            <h6></h6>
            注意:标题文本大小,从h1 至h6逐级减小
    2 段落标签
        1 语法:<p></p>
        2 可以通过标签属性 align = ‘‘设置水平对齐方式取值 left/center/right
            默认左对齐,
    3 其他的文本标签
        1 文本加粗:<b></b> <strong></strong>
        2 文本斜体:<i></i> (italic)
        3 添加下划线:<u></u> (underline)
        4 添加删除线:<s></s> 
        说明:
            以上4种标签,涉及到样式,
            都可以使用css添加效果 加粗 倾斜 下划线
        5  添加上标:            <sup></sup>
        6 添加下标                <sub></sub>
        7 行内分区标签    <span></span>,一般嵌套在其他标签中,用来为特殊文本添加样式
        8  <label></label>普通文本标签
    4 格式标签
        1 换行标签
            <br> 等价于 <br/>
        2 水平线    
            <hr> 等价于 <hr/>
    5 字符实体
        1 &lt ; 表示 <
        2 &gt;  表示 >
        3 &nbsp ; 表示一个空格
        4 &copy ; 表示版权符号
        5 @yen ;  表示人民币¥
    6 块级分区标签
        语法:<div></div>
        作用:容器标签,长用于页面模块划分
    7 标签嵌套的规范:
        1 标签类型划分:
            1 块级元素:
                独占一行,不与其他元素共行
                h1 - h6 p div 
            2 行内元素:
                可以与其他元素共行显示
                b strong i u s span label sup sub 
        2 标签嵌套规范:
            1 块元素中可以嵌套任意类型的元素
            2 行内元素中尽量只嵌套行内元素
            3 特殊情况:
                段落标签中不可以嵌套其他块元素的
6 列表标签
    1 列表:
        从上到下排列数据的结构
        列表中的数据都带有项目符号
    2 语法:
        1  列表分类:
            1 无序列表
            2 有序列表
            3 自定义列表
        2 列表的组成
            1 无序列表由列表标签与列表项标签组成
                 <ul> unordered list 
                    <li></li> list item
                </ul>
                注意:ul中嵌套li元素,每一个li元素表示一条数据
            2 有序列表由列表标签与列表项组成
                <ol> order list
                    <li></li>
                </ol>
            3 定义列表
                <dl>
                    <dt></dt>
                    <dd></dd>
                </dl>
            4 列表属性
                只针对有序列表和无序列表
                    1 有序列表 -ol
                        1 type:
                            取值:
                                1 表示按照数字排序,默认项目符号
                                a 表示按照小写字母排序
                                A 使用大写字母作为项目符号
                                i 使用小写罗马数字
                                I 使用大写罗马数字
                        2 start:设置项目编号从第几个开始
                            取值:数字,表示从第几个开始
                    2 无序列表 -ul
                        1 .type :设置项目符号
                            取值:    
                                disc:默认实心圆点
                                circle:空心圆
                                square:实心正方形
7.图片与超链接
    1 URL
    2 路径分类:
        相对路径:从当前所在的文件夹开始查找
        绝对路径:从计算机的根目录开始查找
    3 图片标签:
        <img src =‘‘>
        src中为图片的URL,可以是网络路径,也可以是本地路径
        

 

前端介绍开始(—)

标签:通过   有序   必须   html   大写   asp   editplus   ado   换行   

原文地址:https://www.cnblogs.com/Skyda/p/9732894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!