zoukankan      html  css  js  c++  java
  • html&css入门篇(一)

    简介

    目前处于学习阶段,现在虽然在Java方面没有什么建树,但我相信持之以恒的坚持做一件事,最终会达到自己的初期目标的。好啦,不多说,今天是Web入门的第一天,让我们一起学习前端入门之html&css吧

    学习原则

    因为时间匆促,暂且作快速入门学习

    1. 首先入门了解基础知识
    2. 代码案例练习,增加代码熟练度
    3. 写博客巩固基础知识,以便后期做复习使用

    HTML快速入门

    1. HTML的简介

    什么是HTML:HyperText Markup Language 超文本标记语言
    特点: 超越了文本的范畴,文本解决不了的事情,超文本可以解决
    没有任何逻辑性语言、一种描述性语言、是最基础的网页语言、代码都是由标签所组成的、语法不严谨
    HTML的作用:Java Web 使用Java开发网页 做网页
    HTML是最基础网页语言
    HTML的代码都是由标签所组成的

    2. HTML的基本格式(重点)

    <html>
        <head>  //头部:存放在head里面的内容会先加载
           加载顺序从上倒下从左到右
            存放属性的信息或者辅助性的信息
            引入外部的文件(CSS JavaScript简称js)
        </head>
        <body>
            存放就是真正显示给用户的信息
        </body>
    </html>

    3. HTML的注意事项

    大多数的标签都是由开始和结束标签所组成,个别的标签只有单一的功能,或者没有要修饰的内容,可以在标签内结束
    标签上包含属性,通过改变属性的值,可以达到更好的显示的效果
    属性名和属性值,属性名和属性值之间用=连接,属性的值使用双引号、单引号或者不用引号都ok,全都都使用双引号
    但是到了公司就按着你公司的规定

    4. HTML的排版标签

    HTML的注释 <!-- HTML的注释 –>
    <p></p>(重点) 段落标签 特点:标签的开始和结尾位置产生一行空行      属性:align -- 对齐方式
    <br /> 换行标签 <hr /> 一条水平线      属性:color -- 颜色
    值的写法:1)直接写英文单词 2)RGB三原色(red green blue)#aa34cc width--宽度 值的写法:1)执行编写像素值 200px 2)编写百分比 30%
    <div></div>(重点):在网页上声明一块区域
    <span></span>(重点):在网页上声明一块区域 
    区别:div是块级元素,屁股后面跟换行 span标签的行内元素,默认一行 div的作用:CSS+DIV进行页面的布局 span的作用:给用户做友好的提示

    5. HTML的字体标签

    字体标签
    * <font></font>(重点)代表字体标签
    * color 字体颜色 size 字体大小 最大值:7 最小值:1 默认值:3 值的写法:1)1-7范围内 2)+2 默认值+2
    * face 字体类型 标题标签
    * <h1>一级标题</h1> 最大的 默认加粗 块级元素
    * <h2>二级标题</h2> 一级标题最大,一次向下减少...
    * <h6>六级标题</h6>
    * 粗体和斜体标签 <b>粗体</b> <i>斜体</i> 标签是可以嵌套的 <b><i>既是粗体又是斜体</i></b>

    6. HTML的列表标签(重点)

    列表标签:把数据封装成列表   
        <dl>
            <dt>上层项目</dt>
            <dd>下层项目</dd>
            <dd>下层项目</dd>   自动对齐的,默认缩进的
        </dl>
    
        有序列表(重点):   
        <ol>
            ol的属性:
                type    :标号的类型
                start   :从哪开始
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    
        无序列表(重点):
        <ul>
            ul的属性:type:标号的类型    
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
    

     

    7. HTML 图片标签(重点)

    图片标签:有一个单独的图片,需要把图片和HTML的文件关联到一起。
        <img /> 引入一种图片
            src:要链接图片的地址
            width   :图片的显示宽度
            height  :图片的显示高度
            alt     :图片的说明文字

    8. HTML超链接标签(重点)

    超链接标签作用
        <a>文本内容</a>
        一:链接资源:
            必须要出现:href  
            注意1:如果访问的网络的资源,需要编写协议
            注意2:如果访问本地的资源,如果浏览器可以解析的内容,默认直接打开,如果浏览器不能解析,默认弹出下载窗口。
            注意3:如果浏览器不能解析的协议,默认查找操作系统上的应用程序。默认打开应用程序。(扩展)
        二:定位资源:返回顶部
            如果定义资源的话,需要另外的一个属性  name="值"    专业锚点    
            假如说有一个网页非常长,那就可以使用name的属性在网页上定位一些锚点,通过操作返回到指定的锚点
            找个位置定义锚点
        属性:target   代表窗口打开的位置   
            值:_blank    弹出一个新的窗口

    10. HTML表格标签(重点)

    <table> :封装表格的范围
            border:表格的格线
            表格的宽度
            height:代表的表格高度
            cellpadding:文字距离表格线的长度
        <tr>    :代表表格的行
            align:单元格中文字的对齐方式
        <td>    :代表单元格
        <th>    :代表单元格
            th和td的区别:th文本内容默认加粗和居中的。th表格的表头
            td非常重要的属性:合并单元格。
                行合并:rowspan=合并几个单元格值就是几
                列合并:colspan=合并几个单元格值就是几
        <caption>:表格标题

    11. HTML表单标签(重点)

    表单标签:收集用户输入的数据。
    封装表单标签的范围   
        <form>
            form包含属性    
                action  :表单要提交的地址(后台去提交)
                method  :表单提交方式(面试题)
                    问题:常用的提交方式有哪些?
                    答:提交方式有很多,常用有两种,get和post。表单默认的提交方式就是get。get和post的区别
                        * get方式进行提交时,参数列表就显示到地址栏上。
                        * post方式提交是,封装到请求体中。
    
                        * get方式提交时,对安全级别比较低
                        * post方式提交,安全级别比较高
    
                        * get方式提交时,对参数列表的数据大小有限制。
                        * post方式提交是,对大数据没有限制。
    
            用户的输入项的内容:例如:普通的文本框 普通的密码   使用<input type="值的不同,显示不同的输入 text password" >
            ***** 注意:input标签上有两个属性  name(必须要指定) value   (不一定要指定)   name的名称  value的值
            ***** 注意:name属性必须要指定的,value的属性不一定指定
    
            type="text"         普通的文本框
            type="password"     密码框
            type="radio"        单选按钮    只能选择一个
                添加一个属性:组的概念,指定相同的name属性
                有默认值:checked="checked"
            type="checkbox"     多选按钮
                组的概念:指定相同的name属性
                有默认值:checked = "checked"    
            type="file"         文件上传    name属性也是必须指定的
            type="hidden"       隐藏组件    用户不需要看到的数据,就可以使用隐藏组件隐藏起来。
            type="button"       按钮(和js语言和在一起使用)
    
            type="submit"       提交:表单收集用户的数据,点击就可以把表单提交到后台
                ?sex=on                     单选按钮的name的属性的值。
                ?username=zhaosi&sex=on     
                ?username=张三&password=123&sex=nan
            type="reset"        重置:恢复到最初的状态
    
            选择下拉框
            <select name="必须指定的,并且需要指定在select标签上">
                <option value="必须指定,指定在option标签上">北京</option>、
                <option value="必须指定,指定在option标签上">上海</option>
            </select>
            默认值:selected="selected"
    
            文本域:写入多行多列的内容
            <textarea>
                属性:
                    rows 行
                    cols 列
            </textarea>
        </form>

    12. HTML的其他标签

    * 框架标签(frameset):对网页搭建一个框架
        注意:框架标签不能使用在<body>标签的内部和下面

    HTML基础入门暂时了解到这里,以后有时间再深入了解

    CSS快速入门

    1. CSS简介

    什么是CSS  :   层叠样式表   CSS和HTML结合  CSS的选择器(重要)
    CSS语言作用 :   设置网页的显示效果(网页的样式)。
    * 注意:可以避免HTML代码的重复性。
    * 注意:CSS -- 专注网页样式的设置 和HTML -- 专注通过标签来封装数据  分工合作。耦合性降低了。
        <font>数据</font> 编写CSS的代码,设置font标签的样式

    2. CSS与HTML结合(重点)

    什么是css?      css层叠样式表(Cascading Style Sheet)
    作用: 用于美化页面,设置网页的显示效果
        好处:
            1. 可以避免html代码的重复性
            2. css专注网页样式的设置和html    专注通过标签来封装数据,分工合作,耦合性降低
    
    CSS为什么要和HTML结合呢:HTML语言用来通过标签来封装数据的。CSS的代码作用在标签上。
    怎么结合呢?(4种方式)
        * 第一种:每一个HTML的标签,提供了一个属性style,给CSS代码来使用的。style="CSS的代码" 只能设置当前的标签。
        * 如果让第二个div也有相同的样式?
            第二种:HTML的文件,提供一个<style>的标签。在标签的中间来编写CSS的代码。<style>标签需要放在<head>标签的中间
                    在<style>标签上提供一个属性   type="text/css"固定的
            * 注意:优先级:优先级高显示样式
        * 第三种:编写一个外部的CSS的文件,CSS文件里面编写CSS代码,只需要把CSS的文件引入到HTML的文件中。(美工常用的)
            * 引入该文件 使用的CSS代码里面命令    @import url("CSS文件的地址");    @import需要编写在<style>标签的中间
            * 编写一个管理我所有的CSS文件的文件。引入总的CSS的文件就ok了。
        * 第四种:引入外部的文件。HTML的文件提供了一个标签    <link>  (经常经常使用)
            * rel="stylesheet"  :代表当前的文件和被引入的文件之间的关系
            * type="text/css"   :
            * href="CSS文件的地址"   :CSS文件的地址
    
    
    

    3. CSS的优先级(重点)和注意事项

    * 优先级:决定样式。一般的情况下:从上到下,由外到内,优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。
    * 注意事项:
        * CSS代码的写法: 选择器名称{CSS的属性:属性值;属性:属性值;.... } 
        * 属性与属性之间使用分号隔开
        * 属性与属性值之间使用冒号
        * 如果一个属性有多个值,值与值之间使用空格隔开。   div{xx:yy1 yy2}

    4. CSS的选择器(重点)

    CSS的选择器的作用:告诉CSS的代码需要作用在哪个标签上。
    CSS的基本选择器:
        * 标签名选择器    div{CSS的代码} span{}  table{}     具有相同的标签名的标签,都能有相同的样式
        * 类选择器      HTML的标签提供了一个属性 -- class="hehe"  目的:想让div的类的名称是hehe的标签具有样式
                写法: .hehe{CSS的代码}   只要是class的名称叫hehe的标签,都具有相同的样式
                注意:让不同的标签具有相同的样式。
        * id选择器 HTML的标签提供了一个属性  -- id="haha"    
            写法: #haha{CSS的代码}   
            注意:ID一般代表的是唯一值。并且ID的属性给JS语言来使用。需要自己去注意:如果给标签使用ID的属性,需要自己去给指定一个唯一值。
    
            * 优先级:决定样式。一般的情况下:从上到下,由外到内,优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。
            * 优先级:特殊的情况下:标签名选择器 < 类选择器 < ID选择器 < style属性
    

    5. CSS的扩展选择器

    1.CSS的基本选择器
        * 标签名
        * 类选择器:不同的标签有相同的样式  div class="hehe"   span class="hehe"
        * ID选择器
    2.CSS的扩展选择器(组合应用)
        * 关联选择器
            * 标签是可以嵌套的,标签与标签之间存在关系。
            * 语法:div font{ }    标签与标签之间使用空格隔开。
        * 组合选择器
            * 对多个不同的选择器进行相同的样式设定
            * 多个选择器之间可以使用逗号就行隔开。    #haha,.hehe{  }
        * 伪元素选择器
            * CSS预先定义好一些选择器(效果),直接拿过来用。
            * 超链接的伪元素选择器
                未访问的状态
                悬停状态
                点击状态
                访问完成状态
                伪元素选择器,提供了4个状态的选择器。
           * input:focus(文本框获取焦点)    input/blur失去焦点
                想使用超链接4个状态的伪元素选择器的话,使用的顺序:  L V H A
    

    6. CSS的布局(了解)

    1.盒子模型(概念:看图02)
    2.float:left(文档流向右边)或者right(文档流向左边)
    3.position:绝对定位 相对定位
    4.     1). 盒子模型
            |--------|
            |    文本 |
            |    内容 |
            |________|
           border:    默认设置4条边框,分别设置4个边框
            padding: 内边距,文本内容到边框的距离
            margin:外边距,div边框到浏览器的距离
            
            2). (文档流向)float:left|right,默认:从上到下,从左到右
                应用:div从左到右
            3). (绝对定位)position:absolute | relative

    7. CSS的常见操作

    CSS中尺度单位的介绍
    1in = 2.54cm = 25.4 mm = 72pt = 6pc 
    		cm  mm pt px em=16pt
    字体设置
    	font
    	font-size
    	font-style
    	font-weight
    	font-family
    
    文本设置
    text-align 设置对齐方式
    text-indent:2em;设置缩进
    背景设置
    		background-image:url("photo-3.jpg");背景图片
    		background-position:30px 30px;背景图片出现的位置(leftposition,topposition)
    		background-repeat:no-repeat;有没有重复
    		background-color:red;背影色
    列表设置
    	list-style列表样式
    	list-style-image列表图片
    
    定位设置(position,float,clear)
    		/*margin:20px; 设一个值:代表上右下左 20*/
    		/*margin:40px 10px;上下20px 左右10px*/
    		margin:180px 60px 50px;/*margin:10px 40px 50px; 上10px 左右40px 下50px */
    		/*调位置*/
    		100px;
    		height:100px;
    		/*内补丁padding
    		  调内容与边线的距离大小
    		*/
    鼠标样式设置(cursor)
    
    
    
  • 相关阅读:
    读书笔记——吴军《态度》
    JZYZOJ1237 教授的测试 dfs
    NOI1999 JZYZOJ1289 棋盘分割 dp 方差的数学结论
    [JZYZOJ 1288][洛谷 1005] NOIP2007 矩阵取数 dp 高精度
    POJ 3904 JZYZOJ 1202 Sky Code 莫比乌斯反演 组合数
    POJ2157 Check the difficulty of problems 概率DP
    HDU3853 LOOPS 期望DP 简单
    Codeforces 148D. Bag of mice 概率dp
    POJ3071 Football 概率DP 简单
    HDU4405 Aeroplane chess 飞行棋 期望dp 简单
  • 原文地址:https://www.cnblogs.com/codingpark/p/4225926.html
Copyright © 2011-2022 走看看