【html+css3基础】

晴天阿良

已于 2022-06-16 09:27:03 修改

阅读量271

点赞数 4

分类专栏：基础文章标签： sublime text 前端编辑器 html5 css3

于 2022-06-16 09:23:49 首次发布

本文链接：https://blog.csdn.net/m0_64941684/article/details/125308730

版权

基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html与css基础

sublime基本操作：

英文状态下的！加ctleE或者Tab 扩展成初始主体格式。
Ctle+|-放大或缩小。
分屏型显示不同文件：Alt Shift再单击数字键，2的话分屏两屏。
选择：
1.Ctrl D键：选择单个单词，
2.Ctrl L键：选择一行，
3.Ctrl A键：选择全文，
4.Ctrl 多次单击：光标定位在多个位置，可同时进行编辑。
5.注释：选择需要注释的代码Ctrl/。
撤销注释：Ctrl shift /
h2+p5再点击确定可以简洁生成
表格简洁生成模式：table>td3>tr*4、
对齐：alt+shift+f

1.前端分为

1.HTML需掌握
html结构：
网页元素：标题，段落，图片，列表，表格，表单
2css样式
1文本，背景
2布局，盒子，定位
3动画，细节等

3难点：css与html实现轮播图（三种）
label标签的使用，
hover实现下拉列表

小知识

Html不区分大小写
标签一般成对出现除外
嵌套标签
注意缩进
<html> </html>是主体
标签内部构成
<img scr=”logo.jpg”alt=”站标” />
一HTML的结构

<head>   </head>

头部信息、

  <body>      </body>

编辑器：

记事本
Sublime Tex-3和emment插件
WebStorm （工程级别）

一般初始模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>                 </title>
    </head>
    <body> 
        <div>
            Html内容   
           </div>
    </body>
</html>

其中第一句表示文档类型符合HTML5标准
Lang 属性：搜索引擎
En：英语
Zh：中文
<meta>:元数据
Charset属性：字符集编码方式
浏览器：UTF-8
国际编码
注意：编码方式应用流程：
文件-另存-编码方式-选择UTF-8-保存
2.HTML标签
<h1>-<h6>是格式由大到小的标题标签。
<p>-</p>是段落标签
不同段落之间会自动换行
多个空格只显示一个空格
空行也是只会显示一个空格，只有一个不显示。
段内换行<br />
连续多个空格标签：&nbsp
空行标签：两个<br />(单独标签）
预留格式：pre(保存源代码格式），内部可直接输入源代码。
水平线标签：<hr />(单独标签）
注释：
外部链接导航内容：

<a href=”http://www.w3c.org”>w3c组织<a/>

标签内文字在页面会显示下划线，去除方法：
text-decoration:none;

3.插入图像img

<img src=”3cschool.gif”alt=”w3c” />

scr属性：路径+文件名
绝对路径：从盘名开始/依次向下
相对路径：从浏览文件所在文件为基准点
绝对路径:
相对路径：

<img src =”logo.gif” />


`<img src =”logo.gif” />`

<img src =”images/logo.gif” />


 <img src =”../logo.gif” />

图片缩放 Paris
说明：1.图片（logo.gif)与文件在同一文件夹（site）
6. 图片(logo.gif)所在文件夹(images)与文件在同一文件夹
7. 图片(logo.gif)与文件所在文件夹在同一文件
4.区域标签

 <div align=”center”>
<h1>标题内容</h1>
<p>段落内容</P>
</div>

标题内容

段落内容

5无序列表：ul li <

h1>标题内容</h1>
<ul>
<li>无序列表内容</li>
<li>无序列表内容</li>
</ul>

h1>标题内容

无序列表内容
无序列表内容

li标签常常会有小点点，去除方法是： list-style:none; 2.5有序列表：ol

<h1>标题内容</h1>
<ol>
<li>无序列表内容</li>
<li>无序列表内容</li>
</ol>

标题内容

无序列表内容
无序列表内容

2.6表格标签：table表格，tr行，td个
th表头

<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<table border=”1”>
<table>
<tr>
<th>表头</th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th>表头</th>
<td>内容</td>
<td>内容</td>
</tr>
</table>

内容	内容	内容
内容	内容	内容

表头	内容	内容
表头	内容	内容

2.7表单元素

Input type=
Select
Textarea

<form>标签成对出现，主要属性action：表示收集来的数据交由那个页面处理
Input标签：组成文本框与密码框

<form>
<input type=”text” name=”userName” />
<br />
<input type=”password” name=”usePsd />
</form>

说明：text指文本框，password指密码框，区别文本框输入是文字显示，密码框输入是*显示。
按钮：提交按钮，重置按钮
提交按钮：submit

<form>

姓名：

<input type=”text” value=""   name=”userName” />
<input type=”submit”  value="提交" name=”usePsd />
</form>

重置按钮：reset

单选框与复选框：radio|checkbox

<form>
            性别:
            男<input type="radio" value="boy" name="gender" checked=" checked" />
            女<input type="radio" value="girl" name="gender"/>
            <br />
            爱好:
            <input type="checkbox" value="1" name="music" checked="checked"/>音乐
            <input type="checkbox" value="2" name="sport"/>体育
            <input type="checkbox" value="3" name="reading"/>阅读
</form>

(可以在编辑器试一下）

性别: 男女
爱好: 音乐体育阅读

下拉列表框：select，option

<form>
            爱好:<select>
            <option>看书</option>
            <option selected="selected">旅游</option><option>运动</option>
            <option>购物</option></select>
 </form>

爱好: 看书旅游运动购物

文本域：taxtarea

<form>
            个人简介:<br >
            <textarea cols="50"rows="10">
            在这里输入内容...
            </textarea>
            <br />
            <input type="submit" value="确定"/><input type="reset" value="重置"/>
</form>

个人简介:

font：斜体粗体字号/行高字体

font:italicbold 16px/1.5em  ‘宋体‘

字号：font-size：12px；
文字颜色：color：blue；
加粗：font-weight：bold；
对齐：text-align：left；
字体：font:”黑体”；
背景：background-color:#ccc;
颜色：

背景：

Background-color:
Background-image:url(“路径和图片名”)(背景图片大于背景颜色)
Backaround-repeat:

盒子背景透明：
Style opacity属性
opacity:0.2;（透明的等级）
超链接：

列表和表格：
列表：

List-style
List-style-image
url(“相对路径和文件名”)
List-style-position

List-style-type

表格：

Border
Width
Weight
Border-collapse

奇偶选择器：
标签或其他类型的名字：nth-child(odd|even)

rt:nth-child(odd){
background-color:#EAF2D3;
}

行内样式

<p style=”color:red;”>

注意：引号内没有=号，用：号代替，

内嵌样式
Head标签内；

<style>

标签选择器

Body{}
h1{}
p{}
hr{}

类别选择器

点+类名：
.one{}

在需要应用的地方头标签内
<p class=”one”>（没有点）
Id选择器：
#id{}
在需要应用的地方头标签内
<p id=”one”>（没有#）
嵌套声明：
P空格span{}
在需要应用的地方两边分别加：

<span>   </span>

集体声明：

h1,p{}

全局声明：

*{}

链接样式
Head标签内

<link rel=”stylesheet” href=”相对路径”/>
<link rel="stylesheet" type="text/css" href="css/index.css">

Css布局与定位：
1.布局与定位概述：
容器：container；
div默认布局独占一行；

一般布局：

内容：
1.元素什么样：
页面元素的大小；
边框；
与其他元素的距离；
2.定位机制：
文档流；
浮动定位；
层定位；

盒子模型一：
1.内容：content；（包括：width，height）
内边框：padding-top；
边框：border-left；
外边框：margin-bottom；
2.盒子内容溢出时：
overflow属性：
hidden：超出部分不可见；
scroll：显示滚动条；
auto：如果有超出部分显示滚动条；
盒子属性border：

border-width：px，thin，medium，thick；
border-style：dashed（横线），dotted（点），solid（实线），double（双实线）；
border-color：颜色；

盒子模型二：
方向设定上右下左（顺时针）；
1.

padding：

2.margin：(相当于是边距）
垂直方向上会合并；水平不会；
水平居中：margin：上下正常值 auto
3.若干盒子合并为大盒子（newsimglist）；

Html：

<Imgsrc=”images/crisis.jpg”/>
<Imgsrc=”images/crisis.jpg”/>
<Imgsrc=”images/crisis.jpg”/>

文字水平居中：

text-align:center;

默认水平排版：

     CSS：
           #newsimglist{
                 text-align：center；
                 front-size：0；
      }
      #newsimglist img{
           height:100px;
           width:100px;
           margin-left:5px;
           border:1px solid #0cf
           padding:5px;
}

文档流定位（默认）：
方式：从上到下，从左到右；
元素分类：
1．
block：独占一行；
2．
inline：不单独占一行，可设置高宽；（span a）
3．
inline-block：独占一行可设置高宽
相互转换：display：…….

浮动定位：
1.float属性：left（左浮动），right（右浮动），none（不浮动）；
2.clear属性：
left，right，只清除一个方向的浮动；
both（清除左右两边的浮动），
none（默认）；
层定位：
1.
position属性：
1.
fixed 固定定位；
2.
relative相对定位；
3.
absolute绝对定位；
4.
static 默认值；
2.z-index:值大的在上面；

弹性盒子布局：
网格布局：
Css3：
1.圆角边框与阴影：
1.

圆角边框：border-radius：
border-top-left-radius：
border-top-right-radius：
border-bottom-left-radius：
border-bottom-right-radius：

可取一个值表示两值相同；
两个值的话就是水平值和垂直值；
盒子左右两边为半圆边框的设置方法：

div
{
height:50px;
border-radius:25px;
}

阴影box-shadow：inset内部阴影，outset外部阴影，
水平值，垂直值，模糊范围，颜色；
2.文本与文字：
1.text-shadow属性：
与box-shadow用法相似；
2.word-wrap属性：
1.break-word：内容能自动换行不会溢出，
2.normal；
3.@font-face规则：
特殊字体的使用，fonts文件夹放在服务器
3.2D转换：
作用：对元素进行旋转，缩放，移动，拉伸。
1.
transform属性：
格式:trastorm:rotate(30deg);顺时针倾斜30度
rotate（）；旋转；单位：deg；正值：顺时针；负值：逆时针；
scale（x，y）；缩放；小于1缩小，大于1放大；

4.过度与动画：
transition属性：
动画的意义：某些值从一个值在一定的时间内转换为另一个值
transition-property：属性名|all对那个属性进行变化；即：若干个属性用逗号隔开，all则对全部属性； transition-duration：持续时间； transition-timing-function：`过度使用的方法；
取值：linear 匀速，ease 慢快慢，ease-in 慢快，ease-out 快慢，ease-in-out 慢快慢

transition-delay
animation动画：@keyframes规则

5.3D变换：transform-style：preserve-3d
1.transform属性：
旋转

rotateX（）
      rotateY（）单位均为deg；
      rotateZ（）

透视：perspective属性；
父容器：transform-style：preserve-3d；
transform：rotateY（60deg）；
舞台：perspective：100px；

锚点功能

javascrap
1概述
2变量的声明
3数据类型：
1.
数字类型：
整数
浮点数
2.
字符串类型
string类型
3.
布尔类型
boolean类型：
4.
），空
5.
），未定义
数据转换：
隐式转换

强制转换：
toSting（）：

易错：
：与;搞混
1．父级盒子与子级盒子类名中间需要加空格
2.css中标签“>”作用

晴天阿良

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【html+css3基础】

html+css3基础，掌握基础概念
复制链接

扫一扫

专栏目录

【html+css3基础】

html与css基础

sublime基本操作：

1.前端分为

小知识

编辑器：

一般初始模板

标题内容

标题内容

“相关推荐”对你有帮助么？