HTML CSS入门

最新推荐文章于 2024-03-22 19:14:59 发布

Dracarys__

最新推荐文章于 2024-03-22 19:14:59 发布

阅读量308

点赞数

文章标签：基础

本文链接：https://blog.csdn.net/Dracarys__/article/details/79902144

版权

1：创建环境

（1）webstorm的安装：不做过多赘述，与多数软件安装方式一致。

（2）建立project:目前只使用图中第一项，建立完成后在这个project中创建新的html与css格式页面（也可创建文件夹后在文件夹内创建，更便于管理。）

（3）更多的辅助功能：webstorm与其他编译软件类似，在主题栏有多种设置辅助功能，这点可以私下慢慢了解，因为现阶段编译html中并没有设计过多辅助功能，所以在此忽略不提。

2：HTML基础

（1）生成页面：在新的HTML编辑环境中生成的页面可通过在当页打开浏览器查看，查看有多种方法，最简单快捷的是在当前环境中当鼠标悬浮至右上角处时，会出现多种浏览器logo，只需点击你所想要运行的浏览器即可。其他方法后期会一点点补上。

（2）基础标签：当前一些简单的标签足够我们写出一个像样的页面

* 文本标签：<b></b>字体加粗 <i></i>斜体 <sub></sub> 下标（H <sub>2</sub> O） <sup></sup>上标 <pre></pre>预先格式化标签（何种格式写入，何种格式输出显示）

* table（表格）标签：<table ...></table> 建立表格，...可写入修饰样式（borber边框宽度，width表格宽度（总）等）， <tbody></tbody>建立表格内容：<rt></tr>(行)中嵌入<th></th>(列表标题)或<td></td> (列表数据)，特殊的当需要合并表格时<th roespan="x">从当前位置起向下竖跨x行， <th colspan="x">从当前位置起向右横跨x行。

*表单标签：<input type="...">...代表各种形式表单数据，可查阅书籍得知。

* 列表标签：<ol><li>...</li></ol>有序列表每一元素li前会有序号标识，<li>中使用type="a\A"来改变序列标识 <ul><li>...</li></ul>无序列表无序号标识，用实心或空心圆点来列行，<li ...>...可加后缀修饰元素内容。

* 样式：样式为修饰html中元素，根据样式设置位置与引入方式的不同又分为行内样式，内嵌样式与外部样式。

** 行内样式：在<body>中的html标签中加后缀设置内容元素的内容，例如上文table中的修饰样式。

**内嵌样式：在<head>下建立<style></style>，利用选择器名称特殊或批量设置框架样式，选择器分为类选择器（同一标签为一类），class, id三种，常用为class与id：用class选择器时格式为.(class名称){...}，class名称可多个区域块选择相同的名称，当所需样式一样时，相同的class名称更方便；用id选择器时格式为#（id名称）{...}，id为唯一名称，只能出现一次，不能重复使用。（样式内容与css特效写法一致，在css中会涉及整理。）

**外部样式：与内嵌样式内容一致，只是需将<style></style>换成<link>将css文件链接至html文件中实现样式编辑。

* 块标签（容器标签）<div></div>框出一个大的架构，可嵌套所有内容，涉及继承问题（会在后续内容中写到） <span></span>行级容器标签，只能包含文字内容，在特殊标记时常用。

3：css基础

*盒子模型：盒子模型可以说是css中最基础最广泛应用的一种模型（自己理解的图）

**盒子中的内容：content: **盒子的边框：border

**边框与内容之间的距离：padding **盒子与其他盒子之间的举例：margin

border:线宽，线的样式，线颜色；

padding与margin可分为：-left,-right,-top,-bottom; 也可：padding：上下值左右值；

**width,height为内容的宽度与高度； **line-height:字的高度（一行字），撑开内容

**top:离顶部的距离，分为绝对定位与相对定位（与left一样）。

*绝对定位与相对定位：在css样式中，定位决定着最后盒子块的展示效果，影响着各个方面的位置，我针对现在用到的最常用的父子集div与并行div，做了以下总结（更多层的还不能肯定自己的对错，在后续学习中会再次总结）

**父子集：当父集与子集都没有定位时，子集的top与left值不做显示；当父集相对定位或绝对定位，子集绝对或相对定位时，子集的top与left值以父集为相对目标丈量距离，父集的top与left值以页面边框为相对目标丈量距离；当父集不做定位，子集绝对定位或相对定位时，父集的top与left值不做显示，子集的top与left值以父集为相对目标丈量距离；当父集相对或绝对定位，子集不做定位时，子集top与left值不做显示，父集以页面边框为相对目标丈量距离。

***********默认父集与边框之间有一定的间隙，去除间隙用*{ margin:0; padding:0;}或绝对定位**********

**并行div：绝对定位相对于浏览器定位，相对定位相对于上一个div定位（默认在上一个div的下方产生）且相对的是上一个div不定位时的位置，绝对定位互不影响。