新手前端HTML笔记(1)

最新推荐文章于 2024-06-19 16:44:30 发布

❀可达鸭

最新推荐文章于 2024-06-19 16:44:30 发布

阅读量2.4k

点赞数

分类专栏： html 文章标签： wed 前端新手 HTML

本文链接：https://blog.csdn.net/IDtangjiasanshao/article/details/102964855

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

以前自己写的小笔记

刚开始的时候自己写的一些笔记新手读我开始是用记事本写的
很久以前记的不全待续~~~

HTML笔记

格式(这个格式只是初级开始)

<!doctype html>

*标题 *样式

h1-h6 标题标记属性：align 文本水平对齐方式属性值：left、right、center

注意点：html语言里面的标记都是语言规定死的，直接使用就可以，不能自己去创造标记

hr水平线标记  属性：color 水平线颜色  属性值：颜色值（英文单词）   单标记

br换行标记  单标记

p段落标记 

字符 &nbsp; 空格

特点：自上而下排列的

二级标题

b、strong 加粗标记

em、i   倾斜标记

font 字体标记  属性: color  size   注意点：size属性的数值最大值是7，最小是1

特点：横向排列的

列表标记有三种：

1、无序列表     ul  li

2、有序列表     ol  li    属性：type 类型  属性值：数字（默认值）、I、A、a

3、自定义列表   dl   dt   dd       dl  dt(图片、名词)  dd（解释）

把外层的标记叫父标记（父元素---容器），把内层的标记叫子标记（子元素）

特点：自上而下排列的

超链接:

a 超链接标记    特点：横向排列的

属性：href   路径  属性值：地址


属性：target   属性值：_blank新窗口打开  _self（默认值）

注意点：如果href的属性值是#号的话，表示空链接，起了一个占位的作用

img 图片标记

属性：src 路径

属性：alt     提示信息（当图片由于某种原因加载失败时显示） --- 路径错误、和谐了、网速比较慢时。。。

属性：title   标题（当鼠标悬停在图片上时才显示）

属性：width   宽度

属性：height  高度

注意点: 如果高度没有设置，设置了宽度高度随着比例等比缩放

图片路径有两种：

1、绝对路径  带盘符的路径  例如：C:\Users\痞子不坏\Desktop\H51910\day02

2、相对路径 在工作中前端使用最多的就是相对路径   ../../

table表格标记作用：显示数据

表格的组成：table  tr（行）  td（列--单元格）

属性：

1、border 边框  只能设置在table上面

2、width 宽度

3、height 高度

4、align使用规则：

a、设置在table上面表示整个表格的水平对齐方式

b、设置tr上面表示整行的文本对齐方式

c、设置td上面表示单元格对齐方式

5、bordercolor 边框颜色   只能设置在table上面

colspan="“行的和并 rowspan=”"列的和并

css

一、使用属性时的注意点：

1、html属性和css属性不能混用

2、一定要把html属性的语法和css属性的语法区分开

二、常用的css属性

1、width 宽度       数值+px

2、height 高度      数值+px

3、font-size 字体大小  数值+px

4、color 文本颜色   颜色值（英文单词、十六进制颜色值）

5、border 边框  值1表示边框的宽度  值2表示边框的线型（样式） 值3表示边框的颜色  缩写形式 例如：border:1px solid(实线) red;

分析形式：

border-left:1px solid red;  左边框

border-right  右边框

border-top  上边框

border-bottom 下边框

6、text-align 文本水平对齐方式 left、right、center

7、margin 外边距  指的是元素与元素之间的距离

margin-left    左边距

margin-right   右边距

margin-top     上边距

margin-bottom   下边距

清除内外边距的方法： *{margin:0;padding:0;}

margin:0 auto; 可以让块级元素水平居中，元素必须有宽度

8、padding内边距（填充） 指的是内容（元素、文本）到边框之间的距离

padding-left    左填充

padding-right

padding-top

padding-bottom

注意事项：

a、如果想保保持元素原有大小不改变，设置了padding值后，需要从元素的宽或者高度减去相应的padding值

b、如果内容是文本的话，只能使用padding值来控制它的距离

c、如果元素的内容是元素的话，既可以使用padding也可以使用margin，怎么选择呢？那个简单就使用那个嘛

d、如果一个元素没有设置宽度，它的宽度默认是跟随父元素的，设置的padding值不需要减去

9、background-color 背景颜色 颜色值


10、float 浮动属性  作用：让竖着的东西横着来  属性值：left左浮动、right右浮动、none不浮动;

注意点：如果两个元素都设置是右浮动，那么咱们元素的方向会改变