HTML5+CSS3+JavsScript 菜鸟学习笔记

目录

HTML

HTML概述

HTML基础

基本标签

表格(table)

背景


HTML

HTML概述

系统架构

B/S架构
Browser/Server 浏览标记

C/S架构
Client/Server 客户端/服务器

W3C(world wide web)
世界万维网联盟(制定了HTML的规范)

HTML是超文本标记语言(标记:标签 使用大量标签;超文本:流媒体、图片、声音等)

HTML基础

基本标签

1、<!doctype html> html5语法(解释文档类型)
(!加tab 可自动生成)
    html不区分大小写
    meta charset=“utf-8”浏览器采用xxx字符集打开

2、换行 <br >

3、水平线<hr>

4、font标签 字体标签

6、实体符号(以&开始 以;结束

     &lt <   小于号  &gt >大于号 
     &nbsp空格

表格(table)

 <table border='1px' width='100px' height='100px'>//可以设置样式 
        <thead>//表头
            <tr>//行
                <th>//单元格 列
                    <input type="checkbox" id="all">//复选框
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="one">//表格内容
            <tr>//行
                <th>
                    <input type="checkbox">
                </th>
                <th>1</th>
                <th>1</th>
            </tr>
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>1</th>
                <th>1</th>
            </tr>
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>1</th>
                <th>1</th>
            </tr>
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>1</th>
                <th>1</th>
            </tr>
        </tbody>
    </table>

 1、单元格合并
    行合并 rowspan=“” 删下不删上(同一行)
    列合并 colspan=“”(不同行)

2、th标签(标题单元格 居中加粗)

      thead、tbody、tfoot(非必须 便于js的编写)

背景 background:url(路径)

图片 <img src=“” title='标题' alt=''>

超链接

<a href=“路径/本地地址” talent=""></a>
         href hot reference 热引用
        talent:_blank新窗口
                    _self
                    _top
                    _parent

作用:
1、通过超链接从浏览器向服务器发送请求
    B---请求(request)-----S
    S---响应(response)-----B

超链接提交的数据是固定的

列表
 

表单(form)

概述

1、作用:收集用户信息。提交数据给服务器
2、<form action="请求路径"></from>

3、action 作用:指定提交数据给哪个服务器(请求路径中的端口对应的服务器)
格式: action?name=value&name=value&name=value

有name才能提交

method 属性(超链接 默认get)
    get:信息会显示在浏览器地址栏上
    post:不会---

input 输入框

下拉列表

select(选择)
    option value=”“

multiple=”multiple“ size=”下拉列表显示个数

input type=”submit/button“ name=”“
submit 提交表单数据
button 普通按钮
reset 重置清空
radio 单选按钮
file  选择文件
text 文本
password 密码
checkbox 复选框

单选按钮必须要有value 
hidden 在网页上不显示 但还是会提醒

value控件
readonly和disabled
都不能修改 但disabled不提交数据

控件maxlength和minlength
设置文本框数字

文本域 textarea
    没有value

表单验证

h5新增类型:

设置表单元素必填 required

如何使用正则 pattern

提交表单时不验证 novalidate/formnavalidate

元素的id属性

在html文档当中。任何元素(节点)都有id属性,id属性是该节点的唯一属性,不能重复

作用:便于获取元素、节点
javascript通过id获取节点对象来进行增删改查

HTML文档是一棵树,叫DOM树(document)。
树上有节点,每个节点都有唯一的id。

div和span

概述

可以称为图层/盒子,方便布局
div独占一行 块级元素
span不会 

盒子套盒子 
可以通过x坐标和y坐标进行定位
标记: 优先级 1

CSS

CSS概述

层叠样式表

三大特性

层叠性

继承性

可以继承的样式
文本 字体 段落 颜色

text-
font-
line-
color

优先级

权重

继承/* 0
元素选择器 1
类选择器/伪类选择器 10
id选择器 100
行内样式 style=“”1000
!important 无穷大

a链接 不参与继承

权重会叠加 但不会进位

是一种标记语言  美化html 实现结构和样式分离

CSS基础

元素显示模式

块元素
div h p ul ol li dl dt dd table tr form 等元素

独占一行

可以设置宽高 内外边距

宽度默认是父级元素的100%

当块级元素的宽度超过父元素宽度时 不会自动换行

行内元素
a span em strong

默认宽度是本身内容宽度

一行可以有多个元素

行内元素只能放文本或者其他行内元素(a除外)

行内块元素 
img input th td

可以实现块级元素在同一行 但中间会有缝隙

默认宽度为本身内容宽度

宽高 行高 内外边距可以设置

转换模式

display

block

inline

inline-block

css语法规范    

选择器

作用:选择标签

分类

基础选择器
标记: 优先级 1

标签选择器 例如:div span等
标记: 优先级 1

类选择器 例如:.box等
标记: 优先级 1

id选择器 例如:#box
标记: 优先级 2

只能出现一个 不能同名

搭配js使用

通配符选择器 *
标记: 优先级 2

复合选择器

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值