WEB--Html简介

文章目录

1、前端介绍

1.HTML           (常用标签          网页的基本结构)
2.CSS            (常用样式          网页的显示效果)
3.JavaScript     (用户交互效果       动态效果)
4.jQuery         (JavaScript库     简化原生js操作)
5.Ajax           (异步数据交互       在页面不刷新的情况下进行数据交互)
6.BootStrap      (前段UI框架        快速搭建静态页面并支持不同设备)

2、HTML概述

什么是HTML

HTML 是用来描述网页的一种超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言。

标记语言: 一套标记标签 (markup tag)

文件格式：.html或.htm

注释: 

标签结构：<开始标签>内容</结束标签>

基本结构

<!DOCTYPE html>      声明为 HTML5 文档
<html>               元素是 HTML 页面的根元素
<head>               元素包含了文档的元（meta）数据
<body>               元素包含了可见的页面内容

3、HTML常用标签

块级元素

特点：独占一行

有语义的块级元素

标题（Heading）：h1～h6

段落: p

列表：
- 无序列表： ul,li----显示为小黑点
- 有序列表：ol,li----显示为数字
- 自定义列表： dl,dt,dd（了解）

表格 table：tr,th,td。属性：
- border 边框
- cellpadding 内容距离表框的距离
- cellspacing 单元格和单元格之间的距离
- rowspan 垂直合并（跨行显示）
- colspan 水平合并（跨列显示）
- anglin 内容水平对其方式
- valign 内容垂直对其方式

无意义的块级元素 div

常用于文档布局，取代了使用表格定义布局的老式方法

行内元素

特点：不独占一行

有语义的行内元素

a标签 : <a href="链接地址">链接文本</a>
- target属性，定义被链接的文档在何处显示; _blank 新窗口打开

img标签 :<img src="图片地址" alt="">

文本标签:
- b标签
- i标签
- strong标签
- em标签

+无语义的行内元素

span标签配合css使用

常用实体字符

> ：大于号

< : 小于于号

  : 不断开空格

" : "

& : &

表单标签

表单是一个包含表单元素的区域。通过form来定义表单区域

通过type属性定义不同类型的表单控件
- text 普通文本输入框
- password 密码输入框
- radio 单选按钮
- checked 多选按钮
- select 下拉框
- file 文件上传选框
- textarea 文本域
- submit 提交按钮
- reset 充值按钮
- hidden 隐藏域，要和表单单一其提交的信息

常用属性：
- name 属性：表单项名，用于存储内容值
- value属性：输入的
- disabled属性：禁用属性
- readonly属性：禁用属性
- checked属性：选择框指定默认选项
- placeholder：提示

注意

form 必须属性：
- action提交地址
- metchod提交方式
- enctype=“multipart/form-data”: 二进制文件上传

post：通过request body传参，参数不可见，参数没有大小限制
- 表单中含有文件上传，method提交方式必须为post

get：通url进行传参，参数可见，不安全，大小有限制

登陆表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <form action='login' method="POST">
        <table>
            <tr>    
                <!--label for取id时，页面点击lable名称会预激对应的输入框-->
                <td><label for="username">用户名：</label></td>
                <td><input type="text" placeholder="请输入用户名" name="username" id="username"></td>
            </tr>
            <tr>    
                <td><label for="pwd">密码：</label></td>
                <td><input type="password" placeholder="请输入密码" name="pwd" id="pwd"></td>
            </tr>
            <tr>    
                <td><label>性别：</label></td>
                <td><input type="radio" name="gender"><label>男</label></td>
                <td><input type="radio" name="gender"><label>女</label></td>
            </tr>
            <tr>    
                <td><label>爱好：</label></td>
                <td><input type="checkbox" name="hobby" value='看电视'><label>看电视</label></td>
                <td><input type="checkbox" name="hobby" value='打篮球'><label>打篮球</label></td>
                <td><input type="checkbox" name="hobby" value='打游戏'><label>打游戏</label></td>
                <td><input type="checkbox" name="hobby" value='睡觉'><label>睡觉</label></td>
            </tr>
            <tr>
                <td><label>生日：</label></td>
                <td>
                    <select name="" id="n">
                        <option value="2010">2010</option>
                        <option value="2011">2011</option>
                        <option value="2011">2011</option>
                    </select>
                </td>
                <td>
                    <select name="" id="y">
                        <option value="2010">1</option>
                        <option value="2011">2</option>
                        <option value="2011">3</option>
                    </select>
                </td>
                <td>
                    <select name="" id="d">
                        <option value="2010">1</option>
                        <option value="2011">2</option>
                        <option value="2011">3</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label>文件上传：</label></td>
                <td><input type="file" name="filename">
                </td>
            </tr>
            <tr>
                <td><label>备注：</label></td>
                <td><textarea>
                </textarea name="" rows="30" cols="50">
                </td>
            </tr>
            <tr>    
                <td>
                    <input type="submit" name="login_bt" value="登陆" >
                    <input type="reset" name="login_reset" value="重置">
                </td>
            </tr>
        </table>
</body>
</html>

4. 块元素

元素就是标签，布局中常用的有三种标签：块元素、内联元素、内联块元素

块元素

块元素定义

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素

布局行为

支持全部的样式

如果没有设置宽度，默认的宽度为父级宽度100%

盒子占据一行、即使设置了宽度

内联元素

内联元素定义

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

布局行为

支持部分样式（不支持宽、高、margin上下）

宽高由内容决定

盒子并在一行

代码换行，盒子之间会产生间距

子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

内联块元素

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，它们在布局中表现的行为：

布局行为

支持全部样式

如果没有设置宽高，宽高由内容决定

盒子并在一行

代码换行，盒子会产生间距

子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式

块元素互相转换

display属性是用来设置元素的类型及隐藏的，常用的属性有：

none 元素隐藏且不占位置

block 元素以块元素显示

inline 元素以内联元素显示

inline-block 元素以内联块元素显示

文章目录

1、前端介绍

2、HTML概述

3、HTML常用标签

块级元素

行内元素

常用实体字符

表单标签

4. 块元素

块元素

内联元素

内联块元素

块元素互相转换

猜你喜欢