html入门

html css js的作用

html主要用于网页主体结构的搭建

css用于页面元素美化

js主要用于页面元素的动态处理

html的介绍

html是Hyper Text Markup Language的英文缩写。意思是超文本标记语言，他的作用是搭建网页结构，在网页上展示内容

标记语言的含义：

说hlml是一种标记语言是因为他不像是java这样的编程语言，因为它是由一系列的标签组成的，没有常量，变量，流程控制，异常处理

io等等的功能.html很简单，每个标签都有它固定的含义和确定的页面显示效果、

超文本的含义

本身是文本，但是呈现出来的最终效果超越了文本

标签的分类

双标签：标签是通过一组尖括号加上标签名的方式来定义的

<p>HTML is  a very popular fore-end technology.</p>

这个例子中使用了一个p标签来定义一个段落，

叫开始标签，

叫做结束标签。开始标签和结束标签一起组成了一个完整的标签。

开始标签和结束标签之间的部分叫做文本标签体简称为标签体

单标签

<input> type="text" name="username" />

属性

<a href="http://www.xxx.com">show detail</a>

href="网址名"就是属性，href叫做属性名，"网址"就是属性值

html的基本结构

在浏览器上浏览网站的时候，浏览器会向服务器发送请求，服务器在得到请求之后就会通过网络将相应的html文件返回并由浏览器来对html文件进行解析和展示

1.html文件是浏览器负责解析和展示的

2.html文件是纯文本文件，普通的编辑工具都可以编辑

3.hmtl的根标签所有的其他标签都要在这个标签中间

4.html根标签下有两个一级子标签

头标签定义那些不直接展示在页面主体上，但是又很重要的内容例如：字符集告诉浏览器使用utf-8字符集对文件进行解码 css引入 js引入体标签定义要展示在页面主体上的内容（标签）

html词汇解释

标签 tag 页面的一对 <>

代码中的一个<>叫做一个标签，有些标签成对出现，称之为双标签，有些标签单独出现，称之为单标签

属性 attribute 对标签特征进行设置的一种方式属性一般在开始标签中定义

一般在开始标签中，用于定义标签的一些特征

文本 text 双标签中间的文字

双标签中的文字，包含空格换行等结构

元素 element 开始标签+属性+文本+结束标签

经过浏览器解析之后，每一个完整的标签称之为一个元素

html语法细节

根标签有且只能有一个
无论是双标签还是单标签都需要正确关闭
标签可以嵌套但是不可以交叉嵌套
注释的语法为，注意不能嵌套
属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值
html中不严格区分字符串使用单双引号，当字符串中插入了一段字符串的时候单双引号要交替使用
html中不区分大小写，但是不能大小写混用
html中不允许自定义标签名，强行定义则无效

html常见标签

标题标签

标题标签一般用于在页面上定义一些标题性的内容，如新闻标题等

<h1></h1>
<h2></h2>
...
<h6></h6>

段落标签（双标签）
段落
缩进标签
有横线的换行

列表标签

有序列表分条列项展示数据的标签，其每一项前面的符号带有顺序特征

<ol>用于表示有序列表
    <li>java</li>
    <li>js</li>
    <li>c</li>
    <li>cpp</li>
</ol>

超链接标签

点击后带有链接跳转的标题，也叫做a标签

有两个属性href 用于定义要跳转的目标资源的地址（一个完整的url）
- 可以使用相对路径以当前资源所在路径为出发点去寻找目标资源
  - ./表示当前资源的所在路径，可以省略不写
  - ../表示当前资源的上一层路径，需要时必须显示写出
- 也可以使用绝对路径
  - 无论资源在哪里。使用以固定的位置作为出发点去找目标资源以开头
target 用于定义目标资源的资源打开方式
- _self 在当前窗口打开目标资源
- _blank 新建窗口打开目标资源

多媒体标签

img图片标签，用于在页面上引入图片

src用于定义图片的连接
title用于定义鼠标悬停时显示的提示文字
alt用于定义图片加载失败时显示的提示文字

表格标签

table标签代表表格
thead标签代表表头可以省略不写
tbody标签代表表体可以省略不写
tfoot标签代表表尾可以省略不写
tr标签代表一行
td标签代表行内的一格
th标签自带加粗和居中效果的td

表单标签

表单标签可以实现让用户在界面上输入各种信息并提交的一种标签看，是向服务端发送数据的主要方式之一

form标签，表单标签，其内部用于定义可以让用户输入信息的表单项标签
- action form的属性之一，用于定义信息提交的服务器的地址
- method form的属性之一，用于定义信息的提交方式
  - get 数据会缀到url后以？作为参数开始的标识，多个参数用&隔开
  - post 数据会通过请求体发送，不会缀在url后
input 标签主要的表单项标签，可以用于定义表单项
- name 属性之一，用于定义提交的参数名
- type 用于定义表单项的类型
  - text 文本框
  - password 密码框
  - submit 提交按钮
  - reset 重制按钮
  - radio 单选框（多个单选框使用相同的name属性值，就会有互斥效果）
  - checkbox复选框（多个选项选多个）
  - hidden 隐藏域不显示在页面上但是提交时会携带（希望用户提交一些特定的信息，但是考虑安全问题，或者是用户操作问题，不希望该数据发生改变，该情况下还可以使用输入框的readonly（只读）属性如果该信息不用提交则还可以使用disabled（不可用））
    
    textarea 文本域多行文本框
    
    select 下拉框
```
option 选项
```

表单项一定要定义name属性，该属性用于明确提交的参数名

表单项还需要定义value属性，该属性用于明确提交时的实参{可以不写，默认为自己输入的值}

get和post的差异

get

1.参数会以键值对的形式放在url后提交

2，数据会直接暴露在地址栏上，相对不安全

3，地址栏的长度是有限制的，所以提交的数据量不大

4，地址栏上只能是字符，不能提交文件

5，在效率上，get比post高一些

post

1，参数不默认放在url后面

2，数据不会直接暴露在地址栏上，相对来说安全

3，数据是单独打包通过请求体发送的，提交的数据量比较大

4，请求体中，可以是字符，也可以是字节数据，可以提交文件

页面布局相关标签

通过css设计样式（通过元素的style属性进行设置）

style="样式名:样式值;样式名:样式值;样式名:样式值;..."

通过div和span比较来区分块元素和行内·元素的区别‘

块元素：自己独占一行的元素div css样式的宽高都是生效的

行内元素：不会自己独占一行的元素span css样式的宽高很多都是不生效的

特殊字符

对于html来说，某些符号是有特殊含义的，如果想要显示这些特殊符号需要进行转义

css的使用

css层叠样式能够对网页中元素位置的排版进行像素级的控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式进行编辑的能力，简单来说就是美化网页

css的引入方式

行内式（通过元素的style属性引入样式）
- 缺点：代码复用率低，不利于维护
- css代码和html结构代码交织在一起影响阅读，影响文件大小，影响性能
示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮"
    style="width: 60px;height: 40px;background-color: aqua;color: red;font-size: 22px;font-family: '隶书';border: 1px solid greenyellow;border-radius: 5px;" />
</body>
</html>

内嵌式
- 通过head标签中的style标签定义本页面的公共样式
- 通过选择器确定样式的作用元素
- 缺点是只能作用在本文件不能跨文件使用
示例：

    
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> input{
        width: 60px;height: 40px;background-color: aqua;color: red;font-size: 22px;font-family: '隶书';border: 1px solid greenyellow;border-radius: 5px;
    }
    </style>
</head>
<body>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
</body>
</html>

外部样式表

将css代码单独放在一个.css文件中，哪个html需要这些代码就在head中通过link标签引入

示例：

    
    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link href="btn.css" rel="stylesheet">
</head>
<body>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
</body>
</html>

注意：导入的是css的样式文件文件类型要指明为stylesheet
只需将css样式的代码保存在.css文件中就可以通过link标签在不同的文件中使用该css样式

css选择器

元素选择器根据标签名来确定作用元素

语法标签名{}

缺点，某些同名的元素不希望使用某些样式某些不同名的元素也使用该样式，都无法协调

语法实例：


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }

        
    </style>

</head>
<body>
    <input type="button"  value="按钮"/>
    <input type="button"  value="按钮"/>
</body>
</html>

id选择器根据标签的id值确定样式的作用元素

一般每个元素都有id元素，但是在一个页面中，id的值不应该相同，id具有唯一性

缺点：id的值具有唯一性，样式只能作用在一个元素上

语法实例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn1 {
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }

        
    </style>

</head>
<body>
    <input type="button" id="btn1" value="按钮"/>
    <input type="button" id="btn1" value="按钮"/>
</body>
</html>

class选择器根据元素的属性值确定样式的作用元素

元素的class属性值可以重复，而且一个元素的class属性可以有多个值

语法实例：


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .shapeClass {
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }
        .colorClass {
            background-color: aqua;
            color: blue;
            border: 3px solid black;
        }
        .fontClass {
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
        }

        
    </style>

</head>
<body>
    <input type="button" class="colorClass shapeClass fontClass" value="按钮"/>
    <input type="button" value="按钮"/>
    <input type="button" value="按钮"/>
</body>
</html>

css浮动

css的浮动使元素脱离文档流，按照指定的方向，直到它的外边缘碰到包含框或者另一个浮动框的边框为止

css定位

position

static默认

absolute 绝对

relative 相对相对元素原本的位置不会使元素发生脱离文档流

fixed 相对相对浏览器窗口的位置会发生脱离文档流

还需要配合

left right top bottom 中的一个来完成

css盒子模型

通过css的盒子模型我们就可以精准的控制元素的内外边距

内边距：padding

外边距：margin

html，css的使用