黑马程序员技术交流社区

标题: 【石家庄校区】HTML&CS笔记 [打印本页]
作者: 湿漉漉的文字控    时间: 2018-12-17 15:01
标题: 【石家庄校区】HTML&CS笔记
本帖最后由 小石姐姐 于 2018-12-19 16:01 编辑

HTML&CSS

Web概念:
        javaWeb : 使用java语言开发基于互联网的项目
        软件架构
                B/S : Brower / Server
                        只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
                        优点 : 开发,安装,部署,维护简单
                        缺点 : 如果应用过大,用户体验受到影响
                                        对硬件要求过高
                C/S : Client / Server
                        在用户端有一个客户端程序,在远处有一个服务器程序
                        优点 :  用户体验佳
                        缺点 : 开发,安装,部署,维护麻烦
                B / S : 依赖于网络
资源分类:
        静态资源 : 数据全部都是写死的
                                浏览器自身就能够对静态资源进行解析
                                静态网页开发技术(HTML, CSS, JavaScript按照浏览器解析的标准进行书写)
        动态资源 : 涉及到数据的交互
                                动态网页技术(jsp / Server, php, asp)
                                用户请求的是动态资源,不能直接被解析,将动态资源转换为静态资源,在浏览
器被浏览器解析
                HTML : 用于搭建基础网页
                CSS : 美化网页
                JS : 控制页面元素,让页面有动态效果
        服务器
                电脑
                        CPU(稳定),主板,硬盘(萨斯),内存,服务端操作系统
                        刀片式服务器
                                1U/2U
        独立IP
        HTML (Hyper Text Markup Language 超文本标记语言)
                超文本
                        是由超链接的方法,将各种不同的空间的文字信息组织在一起的网状文本
                标记语言
                        有标签构成的语言<标签名称> html xml
                        标记语言不是编程语言
                标签
                        后缀 : html htm
                  
[Groovy] 纯文本查看 复制代码
     <html>

                                <head>

                                        <title>标题</title>

                                        <meta charset = 'utf-8'></meta>

                                </head>

                                <body>

                                        具体内容<br/>

                                </body>

                        </html>

                        标签分为
                                单边和双边标签 : 单边标签可以省略<br/> <hr/>横线
                                行内标签和块级标签 :
                                        行内标签:只占内容大小
                                        块级标签:单独占一块区域
                        标签可以嵌套
                                需要正确嵌套,不能你中有我,我中有你
                        在开始标签中可以定义属性,属性由键值对构成,值需要引号引起来
                                <font color = 'red'>内容</font>
                                内容 --> 展示在页面上的
                                font --> 标题名称
                                color --> 标题属性名称
                                red --> 属性值               
                文件标签:构成html最基础的标签
                        html:html跟标签
                        head:头标签(指定html文档的一些属性.引入外部资源)
                        title:定义标题标签
                        body:体标签
                字体排版
                        注释:<!-- 注释内容 -->
                        *<br> 换行 (单边)
                        *<h1 ~ h6> 标题标签 字体大小逐渐减小(双边)
                        *<p> 段落标签 (双边)
                        <hr> 显示一条水平线
                        **<b> 加粗 (双边)
                        **<i> 斜体 (双边)
                        **<u> 下划线 (双边)
                        **<font size = '1 ~ 7'> 字体标签 (双边)
                        &nbsb: 空格
                        <: 小于
                        >: 大于
                ***超链接
                        <a href = '指定要跳转的url(统一资源定位符)'>内容</a>
                        <a href = '指定要跳转的url() target = '_blank(在新页面中打开)/_self(在当前叶念打
   开)'(指定打开资源的方式)>内容</a>
                        herf 支持网络路径和本地路径
                *图片
                        <img src = '' width = '' height = '' alt = './本级目录 ../上一级路径'/>
                        src = ''
                        width和height只能最好存在一个        
                ****表格
                        div(每一个div占满一行,块级标签)
                        span(只占文本一行,行内标签 内联标签)
                        table:定义表格
                                (border 边框)
                                (width 宽度)
                                (cellpadding定义内容和单元格之间的距离)
                                (cellspacing 定义单元格之间的距离指定为0单元格之间的线合为一条)
                                (bgcolor 背景色)                                
                        tr:定义行
                        td:定义单元格
                                colspon 和并列
                                rowspon 合并行        
                        th:定义表头单元格(居中 加粗)
                        <caption> 表格标题
                        <thead> 表格的头部分
                        <tbody> 表格的体部分
                        <tfoot> 表格的脚部分
                        合并单元格
                        ***表格的嵌套
                                table
                                        tr
                                                td
                                                        table
                                                                tr
                                                                        td
                **列表
                        *无序
                                ul
                                        li
                        有序
                                ol
                                        li
                        列表的嵌套
                                ul
                                        li
                                                ul
                                                        li 所有的内容全部在li中写
表单标签
                表单标签中必须提供name属性               
        <form method="get/post" action="提交数据的位置">
                一个个的表单标签        
        </form>
        action不写的话提交当前页面
        get和post区别
                1.get数据在地址栏,post数据在请求体重
                2.get有长度大小限制,post没有长度大小限制
                3.post相对更安全
                4.文件上传请求方式只能是post        
        input  type:
                                *text                        //文本
                                *password                //密码
                                *hidden                        //隐藏域(页面看不到)        必须有name,value
                                *radio                        //单选-->共同的name,还要有value,checked
                                *checkbox                //多选-->共同的name,还要有value,checked
                                *submit                        //提交-->把数据提交到form的action的链接去
                                reset                        //重置
                                *button                        //按钮 --> 配合js使用
                                file                        //文件上传
                                image                        //图片上传

        select 标签(下拉列表)-->name
                option(下拉列表子标签)-->value,selected
        textarea 标签(文本区)
        button 标签(普通按钮)
表单标签
        form
属性:action 指定提交数据的url, method 提交方式 get  post

CSS(层叠样式表) : 页面美化和布局控制
        概念 : Cascading Style Sheets
                层叠 : 多个样式可以作用在同一个html的元素上,同时生效        
        好处 :
                功能强大
                将内容的展示和样式控制分离
                        降低耦合度(解耦)
                        分工协作更容易
                        提高开发效率
        CSS的使用 : CSS与html结合方式
                (行内式)
                        在标签内使用style属性指定css代码
                (内联)内部
                        在head标签内定义style标签体内容
                (外链式)外部
                        定义CSS资源文件
                        在head标签中定义link标签,引入外部资源文件
                1. 三种方式的作用范围越来越大
                2. 内联方式不常用
                3. 第三种格式 @import = "css文件路径.css"               
        CSS语法格式
                选择器 {
                        属性名:值;
                        属性名:值;
                        ...
                }
        选择器 : 筛选具有相似特征的元素
                分类:
                        基础选择器
                                id选择器 (选择具体的id属性值的元素)
                                元素选择器 (具有相同标签名称的元素)
                                类选择器 (选择具有相同class属性值得元素)
                                id选择器的优先级 > 类选择器的优先级 > 元素选择器的优先级        
                        扩展选择器
                                选择所有元素
                                        * {}
                                并集选择器
                                        选择器1,选择器2 {}
                                后代选择器
                                        选择器1 选择器2 {}
                                子元素选择器
                                        选择器1>选择器2 {}
                                属性选择器 : 选择元素名称,属性名=属性值
                                伪类选择器 : 选择一些元素所具有的状态
                                        元素:状态{}        
                                        <a>
                                                状态
                                                        link (初始)
                                                        hover (指向)
                                                        active (按住)
                                                        visited (访问过)
        属性
                字体,文本
                        font-size (字体大小)
                        color (文本颜色)
                        text-align (对其方式)
                        height (行高)
                边框
                        border (边框 复合属性)
                尺寸
                        height (高度)
                        width (宽度)
                背景
                        background
                盒子模型
                        margin 外边距
                        padding 内边距
                        属性
                                box-sizing: border-size盒子宽度和高度为最终值
                        float (浮动)
                                left
                                right







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2