HTML笔记

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>

在这里插入图片描述

事件属性

<!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>

在这里插入图片描述

单双标签

在这里插入图片描述
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>

在这里插入图片描述

标签的语法

标签不能够交叉嵌套

在这里插入图片描述

标签必须正确关闭

在这里插入图片描述

没有文本内容的标签

在这里插入图片描述

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

在这里插入图片描述

注释不能嵌套

在这里插入图片描述

常用标签

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>

在这里插入图片描述

表单格式化

<!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>

在这里插入图片描述

表单提交的细节

在这里插入图片描述
增加如下细节
在这里插入图片描述
提交后的网址
在这里插入图片描述
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>

在这里插入图片描述
提交后:

在这里插入图片描述
此时我们的单选和复选发送的是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>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值