您的位置: 首页  >  文章  >  前端第一周学习整理

前端第一周学习整理

分类: 文章 • 2024-06-26 14:05:10

Day1：

了解页面的组成：元素，标签，属性，内容

          head里内容介绍

<head>
    <!--页面编码方式-->
    <meta charset="UTF-8">
    <!--网页关键字 共搜索引擎用（不花钱无效）-->
    <meta name="keywords" content="">
    <!--网页描述-->
    <meta name="description" content="emmmm">
    <!--页面图标-->
    <link rel="icon" href="../../img/f3_Android1.png">
    <!--页面标题-->
    <title>HEAD内容介绍</title>
</head>

标签的分类：行级标签和块级标签

块级标签：

1.标题标签 h1-h6 h1最大  h6最小
2.段落标签 p   在文本中，多个连续的空格和换行都被当成一个空格处理
3.换行标签 br
4.空格的转移符   &nbsp;&nbsp;
5.分割线  hr
6.预格式标签 pre
7.引用 blockquote     cite 引用的来源，后面加来源地址

行级标签：

页面链接<a></a>   href=链接的地址   target=显示的位置（在本页面打开还是重新打开一个页面）
锚点链接 a        href=#链接的位置的id
span（文本） b（粗体）i（斜体） em（又强调意思 斜体显示） strong（有强调意思 粗体显示）
small（比相邻的元素小两个字号）  a（超链接）      q（短引用）

列表：了解有序列表ol和无序列表ul

 

Day2：

组合标签dl dt dd

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

分区标签div

<div></div>
div id=""对分区进行定义命名 style=“”里面属性用；分隔     height高度  background-color背景色 width宽度

链接：页面链接 锚点链接 功能性链接

页面链接a标签

<a href="http://www.baidu.com" target="_self">百度</a><-_self页面自身显示->
<a href="demo02.html" target="_blank">demo02</a><-_blank重新打开页面显示->

锚点链接

<body>
<h1 id="top">这是页面顶部</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="#top">返回顶部</a>
</body>

功能性链接

<a href="tencent://message/?uin=784971454&Site=&Menu-=yes">联系客服</a>
<a href="tencent://message/?Menu=yes&uin=366324061&Site=80fans&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a545b1714f9d45
">链接到客服</a>
<a href="tel:13110016538" class="call">13110016538</a>
</body>

 

表格

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

表格属性：

表格 table   表格行tr   表格列td  th表格内容加粗     table属性border边框宽度   
width单元格宽度    height单元格高度
align  表格文本水平的对齐方式  bgcolor 单元格背景色   background  背景图片  bordercolor 边框颜色
cellspacing 单元格的间距 cellpadding 文本跟单元格间距 valign文本垂直对齐方式

相同属性，单元格的优先级大于行的大于表格的

tr属性：width设置无意义   height设置整行的高度   bgcolor设置整行的背景颜色  
align设置文本的水平对齐方式  valign 设置文本的垂直对齐方式（top/middle/bottom）

表格的跨行跨列：

colspan=：“ 3”   合并三列

rowspan：“ 3”   合并三行

直列化：

<colgroup>
    <col span="2">
</colgroup>
<colgroup bgcolor="red">
    <col>
</colgroup>
<colgroup bgcolor="yellow">
    <col>
    <col>
</colgroup>
表格结构化：
caption表格标题
thead表格头
tbody
tfoot表格底

 

Day3：

表单：

Form

action：指定表单数据提交地址
method：表单数据提交的方法
为了往服务端提交数据时，提交的数据清晰易懂方便处理：
1.普通的输入框，需要添加name属性，来保证键值对的完整
2.非输入框，需要添加name和value属性，来保证键值对的完整。
          另外，name还有分组的作用
单选框，相同name的是一组，单选框中同一组内的选项和互斥的效果。
复选框，也需要name属性来表明当前的多项是一组。

value在输入框中设置，会在输入框中出现初始值。

用过get请求往服务端提交数据的时候，提交的数据会追加在url地址的后面。
以？进行分隔，多个数据之间用&分隔。
get缺点：暴露敏感信息，传输数据有限
get优点：传输速度快

post请求：传输的数据放在请求体中，而不是暴露在url地址的后面
post优点：可以隐藏敏感信息，传输的数据多少没有限制
post缺点：传输速度相对慢

前端第一周学习整理

select 下拉选项<select> <option>文本</option></select>

textarea   文本域

fieldset表单外边框   legend边框文字

元素顺序 tabindex：1为开始索引  

  前端第一周学习整理

 

智能表单

表单外用Form=之前form设置的id可加入表单内

前端第一周学习整理前端第一周学习整理

Autocomplete自动获取之前输入过的信息，=off关闭

Autofocus 自动获取光标

Readonly 只读属性  value=pcc

Selected指定下拉框显示的初始值   multiple可以使下拉框同是选择多项

单选框和复选框通过check属性实现默认选中

Value元素控制

 

Day4：

css：

1.掌握css基本语法

2.使用文本和字体样式美化页面

3.使用背景样式美化页面

4.使用列表及链接样式完成导航

Css用途：外观美化

              布局，定位

<head>

    <meta charset="UTF-8">

    <title>CSS入门</title>

    <style>

        p{/*选择器（样式要作用于哪个或者哪些元素）*/

            color: red;

            font-size: 50px;

            text-align: center;

        }

    </style>

</head>

 

Css选择器用于选择要修饰的元素：

1.标签选择器

2.Id选择器

3.类选择器

4.特殊选择器：交集，并集，后代，通用选择器，伪类

5.Css3中新增的

*匹配一个或多个元素

伪类选择器：

nth-child（2）;nth-child（2n）;first-child;
<style>

    li:first-child{color: red}

    li:nth-child(2){color: aqua}

    li:nth-child(3n){color: rebeccapurple}

    li:last-child{

        color: yellow;}

</style>

 

Td：hover {background-color：red}鼠标光标移动到的位置变红

<style>

    td:hover{

        background-color: red;

    }

</style>

三类应用css样式的方式：

行内样式

内部样式

外部样式

什么是对应样式，对应样式的写法

外部样式link标签引入

样式的优先级

正常顺序下

行内样式>内部样式>外部样式

权值

行内样式1000             #id选择器100          .类选择10             元素选择器1

样式后面加！important优先级最高

属性单位

长度单位：px，像素

颜色单位：十六进制：#ffffff

颜色名称：red

RGB颜色（255.255.255）

尺寸属性：width  height

文本属性

字体样式font简写顺序

Font-style字体样式

Font-variant

Font-weight粗细

Font-size大小

Line-height行高

Font-family字体系列

字体颜色

Color

Opacity（透明度）

行距,对齐等

Line-height行高

Text-align文本对齐

Letter-spacing 字符间距

Text-decoration 文本修饰

Overflow溢出部分的处理

Text-overflow溢出文本部分处理

Text-indent文本缩进
text-indent: 2em;/*文本缩进 2个字符*/

 

 

Day5：

文本阴影：

<style>
    #p{
        font-size: 50px;
        font-weight: bold;
        color: red;
        /*text-shadow：x轴的偏移量 y轴的偏移量 模糊程度 阴影的颜色*/
        text-shadow: 10px 5px 5px black;
        /*text-stroke：文本描边宽度  描边颜色*/
        -webkit-text-stroke: 2px yellow;
    }
</style>

雪碧图：

CSS Sprites (雪碧图)：背景偏移技术

优点：   减少http请求，提高网页性能

减少图片大小

Margin：0 padding：0内外边距为零

<style>
    div{
        width: 25px;
        height: 25px;
        background-image: url("../../img/icon.gif");
    }
    #div1{
        background-position:-82px 0px ;
    }
    #div2{
        background-position: -59px -25px;
    }
</style>

列表：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        width: 50px;
        color: red;
        float: left;
        font-size: 20px;
        margin-left: 50px;
        list-style: none;
    }
</style>

前端第一周学习整理

 

 

 

 

 

 

 

 

 

 

 

 

 

相关推荐