新手前端HTML笔记(1)

以前自己写的小笔记

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

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不浮动;

注意点:如果两个元素都设置是右浮动,那么咱们元素的方向会改变
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值