前端(HTML+CSS+JS)

HTML

汪汪汪!加油!

文档类型声明

作用:告诉浏览器按什么标准来解析页面

html5 的声明,不区分大小写,结束标签可省但不推荐,单标签的/可省但不推荐

html 4.01 有3个版本 严格 传统(过渡) 框架

xhtml 严格的html 区分大小写结束标签不能省略

若无文档类型声明,浏览器按照怪异模式(混杂模式)解析页面,就是按照自己的标准解析页面

有文档类型声明的页面,浏览器按标准模式解析页面,就是按照当前标准解析页面

DTD文档是指有文档类型声明的文档

注意!文档类型声明不是标签

基本结构

head

  • head标签里的属性
    lang属性,对页面中的主要语言进行声明,对搜索引擎和浏览器更友好。en英文 zh-CN中文

  • head标签里包含的标签
    meta, title, link, style, script…

    • 一个网页只有一个title
    • meta用来描述一个html网页文档
      charset属性描述页面主要用的语言
      中文常用utf-8,国外常用gbk
      name和content属性
      name:keywords,description或author
      content就有不同对应,对搜索引擎更友好

body:页面显示的内容

块级元素和行内元素

区别:
1.块级元素独占一行,行内元素在同一行显示
2.块级默认宽度为100%,%相对于父元素来说
行内元素默认宽度由内容决定
3.块级元素可以设置宽高,行内元素设置宽高不生效

块级:h1-h6,hr,p,ul,li
行内:img,文本格式化标签,input

图片

文件路径

绝对路径:
1.网址
2.盘符
html去找图片
相对路径:
1.平级: 直接写
2.下一级:/ 先写平级再写下一级
3.上一级:…/ 上两级:…/…/

常用属性

alt 图片不能正常显示给的提示
title 鼠标悬停在图片上给的提示

还有出br,其他标签都有的属性:
width
height
注意若宽高只设一个,就等比例缩放
html默认单位px

让图片居中

无法直接对img用align定义水平对齐位置,可以用一个p把它包起来,p里用align="center"让它居中

超链接

作用:跳转
属性:
href 路径
href="#" 空链接 效果是返回页面顶部

target:
_blank 打开新窗口
_self 默认值:原窗口打开

name: 锚点名 可以用于同一页面跳转(只能a有)
1.点击a跳转到a
a 跳转到 href="#另一个a的name"
a name

2.点击a跳转到块级元素
块级 id
a 跳转到 href="#块级a的id"

图片之间的跳转
a href=“要跳转的图片路径”
img
a

文本格式化标签

浏览器默认字体为16px
b 加粗
i 倾斜
u 下划线 H5淘汰了
del和s 删除线
em和strong 强调 em是斜体 strong是加粗

sup上标
sub下标

small小号字体
big 大号字体 H5已经淘汰

注释

1.注释之间不能相互嵌套

列表

无序列表

ul li ul
内容写在li里
li里可以写a或者img

ul的type属性全部都用,li的type属性写是什么就是什么
有默认的disc黑色实心圆
circle空心圆
square黑色实心矩形
none不显示

li里还可以嵌套一个ul和li的组合
嵌套展示级别如上,直到黑色实心矩形就一直

有序列表

ol li ol
type有 默认值1,或者 a A i II
对应有个start属性,就是起始的序号
还有一个reversed(=“reversed”)可能有负的

也可以相互嵌套,有序和无序也可以相互嵌套

自定义列表

dl 嵌套 dt和dd 平级
dt 主题 dt描述 一个dl里可以有多个dt dd

一般可以用 图片dt+文字内容dd

表格

表格结构

table
tr定义行
td定义单元格(列)
th特殊单元格和td类似,但是内容默认居中加粗
caption 表格的标题

table属性

border 边框 (作用于最外边的)单位像素
align 给table是作用于table
width height
bgcolor
backgroud 放背景图片
背景颜色和背景图片同时都有,图片的优先级高

gif支持图片透明

cellpadding 单元格内边距(内容到单元格边框)
cellspacing 单元格之间的距离 值为0时变成一条线

tr属性

height
内容默认水平居左
align
bgcolor
background
valign 默认middle 垂直

td属性

height width
align valign bgcolor background

rowspan 跨行
colspan 跨列

表单

form

form的作用:可以把用户输入的数据提交到服务器,使得页面具有交互性。

表单组成:表单标签,表单域,表单按钮
表单标签:form
表单域:用来收集用户输入内容的每一项。(input)
表单按钮:用来确认提交表单信息到服务器的按钮

form之间不能相互嵌套
但是页面里有多个form表单,name区别不同表单

action=“提交到的地址”
method 提交方式,get,pos 默认get

get和pos的区别
1.安全性:get的提交方式不安全,数据会在地址栏中显示,post比较安全。
2.数据体量:get只能提交少量数据(不能大于2kb),post可以提交大量数据。

表单域里的input

input是行内元素
type=“text ”单行文本框 如用户名,邮箱,手机号等
name=“ ”小驼峰命名法 首字母小写,后面每个单词首字母大写
value=“ ” 当前值,默认值

其他:
type:
password 密码
radio 单选按钮 (注意:同一类选项都要有name属性)
checkbox 复选框,记住常用
submit 提交按钮 默认value是提交,可以改value成登录
reset 重置 默认value是重置,可以通过修改value
button 普通按钮 没有任何功能的按钮

按钮标签button,行内元素

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值