B/S软件的结构

前端开发流程

网页的组成部分

HTML简介

HTML文件书写规范

HTML标签介绍

基本属性

<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
    onclick表示单击事件
    alert()是JavaScript提供的一个警告框函数
    它可以接收任意参数，参数就是警告框的提示信息
-->
<body bgcolor="#f0f8ff" )><!--body标签是整个html页面显示的主体内容-->
    <p>hello world</p>
</body>
</html>
HTML

事件属性

<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
    onclick表示单击事件
    alert()是JavaScript提供的一个警告框函数
    它可以接收任意参数，参数就是警告框的提示信息
-->
<body onclick="alert('hello world!')"><!--body标签是整个html页面显示的主体内容-->
    <p>hello world</p>
</body>
</html>
HTML

单双标签

br是换行 hr是水平线。

<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
    onclick表示单击事件
    alert()是JavaScript提供的一个警告框函数
    它可以接收任意参数，参数就是警告框的提示信息
-->
<body><!--body标签是整个html页面显示的主体内容-->
    <button onclick="alert('Hello World!')">按钮</button>
    <br/>
    hello
    <br/>
    world
    <hr/>
    Hello World!
</body>
</html>
HTML

标签的语法

标签不能够交叉嵌套

标签必须正确关闭

没有文本内容的标签

属性必须有值属性值必须加引号

注释不能嵌套

常用标签

font字体标签

font标签用来修改文本的字体（face）颜色（color）和大小（size）。

特殊字符

标题标签

标题标签是h1到h6

对齐：

超链接

self是默认值。

列表标签

无序列表：unordered list

每一项是 list item

有序列表：ordered list

可以用type属性修改前面的符号

img标签

src属性可以设置图片的路径

可以用width和height属性修改图片的宽度和高度

表格标签

table标签是表格标签
tr是行标签（table row）
th是表头标签（table head）
td是单元格标签
border设置表格边框 width和height设置宽度和高度
align设置文本对齐方式也可以设置表格对齐
b设置为文本加粗
th标签完成了居中加粗的效果

用cellspacing设置单元格之间的距离

跨行跨列表格

注意使用rowspan属性和colspan属性来跨行跨列，里面的参数是要跨的行数和列数。
注意跨行跨列后要把某些单元格删掉，不然会被挤出来，不是想要的效果。

iframe标签

点击超链接会让iframe跳转到这个页面。注意使用iframe的name属性和a标签的target属性结合。

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        用户名：<input type="text" value="默认值"><br><br>
        密码：<input type="password"><br><br>
        确认密码：<input type="password"><br><br>
        性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br><br>
        兴趣爱好：<input type="checkbox" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++<br><br>
        国籍：<select>
            <option selected="selected">中国</option>
            <option>美国</option>
            <option>日本</option>
            </select><br><br>
        自我评价：<textarea rows="10" cols="20">默认值</textarea><br><br>
        <input type="reset" value="重置为默认值"><br><br>
        <input type="submit" value="提交表单"><br><br>
    </form>
</body>
</html>
HTML

表单格式化

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
<table align="center">
    <h1 align="center">用户注册</h1>
    <tr>
        <td>
            用户名：
        </td>
        <td>
            <input type="text" value="默认值">
        </td>
    </tr>
    <tr>
        <td>
            密码：
        </td>
        <td>
            <input type="password">
        </td>
    </tr>
    <tr>
        <td>
            确认密码：
        </td>
        <td>
            <input type="password">
        </td>
    </tr>
    <tr>
        <td>
            性别：
        </td>
        <td>
            <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        </td>
    </tr>
    <tr>
        <td>
            兴趣爱好：
        </td>
        <td>
            <input type="checkbox" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++
        </td>
    </tr>
    <tr>
        <td>
            国籍：
        </td>
        <td>
            <select>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select><br><br>
        </td>
    </tr>
    <tr>
        <td>
            自我评价：
        </td>
        <td>
            <textarea rows="10" cols="20">默认值</textarea>
        </td>
    </tr>
    <tr>
        <td>
            <input type="reset" value="重置为默认值">
        </td>
        <td  align="center">
            <input type="submit"value="提交表单">
        </td>
    </tr>

</table>
</form>
</body>
</html>
HTML

表单提交的细节

增加如下细节

提交后的网址

http://localhost:63342/test/127.0.0.1 action的属性值也就是服务器地址
? 分隔符
action=login&sex=on 请求参数（表单信息）

表单提交的时候数据没有发送给服务器的三种情况：

表单没有name属性
单选复选下拉列表中的option标签都需要添加value属性以便发送给服务器
表单项不在提交的form标签中
get请求的特点
浏览器地址栏中的地址是 action属性[+?+请求参数]
请求参数的格式是name=value&name=value
不安全（密码能被看到）
它有数据长度的限制

post请求的特点
浏览器地址栏中的地址只有action属性也就是服务器地址
相对于get请求要安全
理论上没有数据长度的限制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="127.0.0.1" method="get">
    <input type="hidden" name="action" value="login">
<table align="center">
    <h1 align="center">用户注册</h1>
    <tr>
        <td>
            用户名：
        </td>
        <td>
            <input type="text" name="username" value="默认值">
        </td>
    </tr>
    <tr>
        <td>
            密码：
        </td>
        <td>
            <input type="password" name="password">
        </td>
    </tr>
    <tr>
        <td>
            确认密码：
        </td>
        <td>
            <input type="password" name="confirmedpassword">
        </td>
    </tr>
    <tr>
        <td>
            性别：
        </td>
        <td>
            <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        </td>
    </tr>
    <tr>
        <td>
            兴趣爱好：
        </td>
        <td>
            <input type="checkbox" name="habbit" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++
        </td>
    </tr>
    <tr>
        <td>
            国籍：
        </td>
        <td>
            <select name="country">
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select><br><br>
        </td>
    </tr>
    <tr>
        <td>
            自我评价：
        </td>
        <td>
            <textarea name="desc" rows="10" cols="20">默认值</textarea>
        </td>
    </tr>
    <tr>
        <td>
            <input type="reset" value="重置为默认值">
        </td>
        <td  align="center">
            <input type="submit"value="提交表单">
        </td>
    </tr>

</table>
</form>
</body>
</html>
HTML

提交后：

此时我们的单选和复选发送的是on 不是我们想要的有效信息

再次提交

其他标签：div span和p

div标签默认独占一行
span标签它的长度是封装数据的长度
p标签段落标签默认会在段落的上方或下方各空出一行来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span1</span>
    <span>span2</span>
    <p>p1</p>
    <p>p2</p>
</body>
</html>
HTML

CSS介绍

CSS和HTML结合方式

在标签的style属性上设置

如果样式多了，代码量非常庞大，而且可读性差，且没有复用性。

在head标签中，使用style标签来定义需要的css样式。

1
2
3

xxx{
key:value value;
}
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div>my first css</div>
    <div>my first css</div>
    <span>my first css</span>
    <span>my first css</span>
</body>
</html>
HTML

div都有效。

这样span也有效。实现了css复用。
缺点

导入css文件

CSS选择器

标签名选择器

id选择器

class选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        .class01{
            border: 1px solid yellow;
            color: blue;
            font-size: 20px;
        }

        .class02{
            border: 1px dashed red;
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="class01">my first css</div>
    <div class="class02">my first css</div>
    <span class="class01">my first css</span>
    <span class="class01">my first css</span>
</body>
</html>
HTML

id不可重复 class可重复
注意id是#开头 class是.开头

组合选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        #id01,.class01{
            border: 1px solid blue;
            color: green;
            font-size: 20px;
        }

        .class02{
            border: 1px dashed red;
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="id01">my first css</div>
    <div class="class02">my first css</div>
    <span class="class01">my first css</span>
    <span class="class01">my first css</span>
</body>
</html>
HTML

这里就是组合选择器

CSS常用样式

颜色

宽度

高度

背景颜色

字体样式

边框

DIV居中

文本居中

超链接去下划线

表格细线

列表去除修饰

JavaScript介绍

JS与html结合

第一种方式

第二种方式

变量和数据类型

Undefined
Null
Boolean
Number
String

关系运算

逻辑运算

数组

只要我们通过下标赋值，最大的下标值就会自动给数组扩容，注意是赋值才会扩容，比如我们alert(arr[9])会弹出undefined，但是再输出数组长度还是原来的长度，没有被赋值的就是undefined。

函数定义

第一种方式

有参函数定义，只需定义参数个数即可：

定义带有返回值的函数用return即可

第二种方式

函数不允许重载，重载会覆盖掉上一次的定义。

arguments对象

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

这样，您就可以简单地使用函数来查找（例如）数字列表中的最高值：

JS中自定义对象

大括号方式定义

var 变量名 = {属性:value,属性:value};

对象中定义方法：

Object方式

var 变量 = new Object();

事件

事件的注册

静态注册

通过html标签的事件属性直接赋于事件响应后的代码。

动态注册

通过js代码得到标签的的dom对象，然后再通过dom对象.事件名 = function(){}。这种形式赋于事件响应后得到代码，叫动态注册。

onload事件

静态

浏览器解析完页面之后自动触发的事件。

打开后就这样显示弹窗

或者这么写

动态

动态事件注册是固定写法。

onclick事件

静态

点击button1即可弹出这个窗口。

动态

onblur事件

##静态

动态

onchange事件

静态

动态

onsubmit事件

静态

动态

阻止表单提交

return false;可以阻止表单提交

这里我们点静态注册提交弹出不合法提示同时不会提交表单
这里的return不能少 既实现了表单不提交也实现了点击提交提示不合法的弹窗。
动态就方便很多不需要return 一个函数只需函数里return false即可

弹出不合法弹窗并且表单没有提交。

Document对象

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

Document对象中的方法

验证用户名是否有效：

正则表达式

两种常见的验证提示效果

第一种：文字

第二种：图像

getElementsByName

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            const hobbies = document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = "checked";
            }

        }
        function checkNone() {
            const hobbies = document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = "";
            }
        }
        function reverse() {
            const hobbies = document.getElementsByName("hobby");
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }

    </script>
</head>
<body>
   兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
   <br>
   <button onclick="checkAll()">全选</button>
    <button onclick="checkNone()">全不选</button>
    <button onclick="reverse()">反选</button>
</body>
</html>
HTML

getElementsByTagName

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            var inputs = document.getElementsByTagName("input");
            for (let i = 0; i < inputs.length;i++){
                inputs[i].checked = true;
            }
        }


    </script>
</head>
<body>
   兴趣爱好：
    <input type="checkbox" value="cpp">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
   <br>
   <button onclick="checkAll()">全选</button>

</body>
</html>
HTML

三个查询方法使用注意事项

优先顺序
id>name>TagName

document对象补充说明

createElement和appendChild

注意body对象是现成的直接调用

createTextNode

刚才的div可以用这个方法替代。

#前端

前端·基础

http://example.com/2021/06/13/HTML%C2%B7%E5%9F%BA%E7%A1%80/

作者

AHawkeye

发布于

2021年6月13日

许可协议

Java·面经上一篇

Java·StreamAPI与Optional类下一篇

前端·基础

B/S软件的结构

前端开发流程

网页的组成部分

HTML简介

HTML文件书写规范

HTML标签介绍

基本属性

事件属性

单双标签

标签的语法

标签不能够交叉嵌套

标签必须正确关闭

没有文本内容的标签

属性必须有值 属性值必须加引号

注释不能嵌套

常用标签

font字体标签

特殊字符

标题标签

超链接

列表标签

无序列表：unordered list

有序列表：ordered list

img标签

表格标签

跨行跨列表格

iframe标签

表单标签

表单格式化

表单提交的细节

其他标签：div span和p

CSS介绍

CSS和HTML结合方式

在标签的style属性上设置

在head标签中，使用style标签来定义需要的css样式。

导入css文件

CSS选择器

标签名选择器

id选择器

class选择器

组合选择器

CSS常用样式

颜色

宽度

高度

背景颜色

字体样式

边框

DIV居中

文本居中

超链接去下划线

表格细线

列表去除修饰

JavaScript介绍

JS与html结合

第一种方式

第二种方式

变量和数据类型

关系运算

逻辑运算

数组

函数定义

第一种方式

第二种方式

函数不允许重载，重载会覆盖掉上一次的定义。

arguments对象

JS中自定义对象

大括号方式定义

Object方式

事件

事件的注册

静态注册

动态注册

onload事件

静态

动态

onclick事件

静态

动态

属性必须有值属性值必须加引号