HTML学习笔记

最新推荐文章于 2024-09-27 09:37:38 发布

Smile Hun

最新推荐文章于 2024-09-27 09:37:38 发布

阅读量138

点赞数

分类专栏： jsp学习

本文链接：https://blog.csdn.net/SmileJayNew/article/details/119683317

版权

html web

jsp学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2. HTML

2.1HTML简介

HTML全称为：Hyper Text Markup Language(超文本标记语言)

通过**标签来标记要显示的网页中的各个部分。网页文件本身是一种文本**文件，通过在文本文件中添加标记符，可以高速浏览器如何显示其中的内容，如文字如何处理，画面如何安排，图片如何显示等。

2.2HTML格式

<!DOCTYPE html> 			<!--约束，声明-->
<html lang="en"> 			<!-- html标签-->
<head> 						<!--表示头部信息-->
    <meta charset="UTF-8">	<!--表示当前页面使用的字符集 UTF-8-->
    <title>Smile</title>	<!--标题，页面名称-->
</head>
<body>						<!--整个HTML页面显示的主体内容-->
初识HTML
</body>
</html>

2.3HTML标签

2.3.1HTML标签简介

标签的格式

<标签名>

封装的数据

</标签名>

标签名，大小写**不敏感**
标签有自己的属性

基本属性：bgcolor = “red” 可以修改简单的样式效果

事件属性：onclick = “alert(‘你好！’)” 可以直接设置事件响应后的效果
标签的分类
单标签：<标签名/> 换行(br)、水平线(hr)等

双标签：<标签名>…封装的数据…</标签名>

2.3.2HTML标签语法

标签不能交叉嵌套
标签必须正确闭合(双标签成对出现！)
属性必须要有值
注释不能嵌套

2.4常用标签

2.4.1 字体设置 font

可以设置字体的颜色，类型，字号

可选属性：

固有属性：color, face, size

事件属性：null

<font color="#a52a2a" size="7" face="宋体">
    听说你很猛？
</font>

2.4.2 按钮添加 button

<body bgcolor="#7fffd4">
hello
<button onclick="alert('爬')">莫挨老子</button>
</body>

2.4.3 标题添加 h

添加标题

可选属性：

固有属性：align(对齐) = “left(默认) / center / right”

color, face, size

…

2.4.4 超链接添加 a

注：当连接为外部链接时，要带上前缀协议http。

可选属性：

事件属性：target = “__self(在当前页面打开) / blank(新建窗口打开)”

<a href="http://www.baidu.com" target="_blank">谷歌首页</a>

当超链接遇到图片，就变成了，广告！西八儿

<a href="http://www.baidu.com" target="_blank"><img src="src/images.jpg"/></a>

点进去以后，直接打开porn，不，打开百度页面

2.4.5 列表生成

2.4.5.1无序列表 ul

<ul>
    <li>尼古拉斯狗蛋</li>
    <li>尼古拉斯？？</li>
    <li>尼古拉斯？！</li>
</ul>

2.4.5.2有序列表 ol

可选属性：

固有属性：type(符号类型 )

<ol> <!--可以修改序号类型-->
    <li>尼古拉斯狗蛋</li>
    <li>尼古拉斯？？</li>
    <li>尼古拉斯？！</li>
</ol>

2.4.6换行与添加水平线 br, hr

注：< hr/ >默认在下一行加水平线，同时起点移到开头

hello<br/>我好困<hr/>

2.4.7添加图片 IMG

属性：

固有属性：

src：设置图片的路径

width：设置图片宽度

height：设置图片高度

border：添加边框单位：像素

事件属性：

alt：当图片找不到时，替换为后面的内容

<img src="../src/1.jpg" alt = "图我偷了，不给你看！"/>

JaveSE中的路径：

相对路径：从工程名开始

绝对路径：盘符：/目录/文件名

web中的路径：

相对路径

. 表示当前文件所在的目录

… 表示当前文件所在的上一级目录

文件名表示当前文件所在目录的文件

绝对路径

http://ip:port/工程名/资源路径

<img src="../src/images.jpg"/>

2.4.8表格生成 table

table固有属性：

alain: 对齐方式

border：边框

cellspacing：单元格之间的间距

width, weight

行标签：tr

tr固有属性：

colspan：跨列

rowspan：跨行

单元格标签：td

加粗标签：b

td固有属性

align

表头：th

<table width="400" height = "300" border = "1" cellspacing="0">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td rowspan="2">2.2</td>
        <td colspan="2">2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <th>3.2</t>
        <td>3.3</td>
    </tr>
</table>

2.4.9画中画 iframe

可以在页面中开辟一个小区域，用来显示一个单独页面。

固有属性：

src, width, height

name：定义页面访问名称

这是第一个页面噢！<br/>
第二个页面在下面！<hr/>
<iframe src = "Tutorial2.html" width="310" height="200" frameborder="0"/>

注：套娃操作

<body>
这是第一个页面噢！<br/>
第二个页面在下面！<hr/>
<iframe src = "Tutorial2.html" width="310" height="200" frameborder="0" name="TKWA"></iframe>
<br/>
新页面来咯！
<br/>
<a href="Tutorial1.html" target="TKWA" >套娃开始！！！</a>
</body>

2.4.10表单生成 form

表单就是html页面中用来收集用户数据的部分，然后浏览器将这些数据发送到服务器

form固有属性：

action：属性设置提交的服务器地址

method：属性设置提交的方式get(默认)或post

注：表单提交内容缺失的原因

		1. 只提交有<font color = "red">name</font>属性的项，查看是否有忘了写name的
		2. 单选、复选、下拉列表中的option，需要先赋值，这样发送的信息为所赋的值，而不是on(已选)
		3. 只提交form标签内的内容

GET请求的特点：

浏览器地址栏中的地址是：action属性(+ ？+请求参数)

请求参数的格式是：name = value&name = value

不安全，参数在浏览器地址栏可以看到
数据长度的限制，100个字符

POST请求的特点：

浏览器地址栏中只有action属性值，即只有服务器地址
相对于GET请求，更安全
理论上没有数据长度的限制

标签(表单项)：

返回5.5 jQuery的属性操作

1. input 文本输入框

input固有属性：

type：输入值的类型

参数：type = “password” 输入直接就是*

type = “text”

type = “radio” 同组内单选项，注：需要提前用name属性进行分组

type = “checkbox” 多选

type = "reset"重置之前的内容为默认值

type = "submit"提交

type = "button"添加按钮

type = “file” 提交文件

type = "hidden"隐藏域当需要发送某些信息，而不需要用户参与时，则使用隐藏域

value：默认值

maxlength：数据最大长度

name：分组

checked：默认

select：下拉项

select固有属性：

selected：默认

textarea：多行文本输入框

textarea固有属性：

rows：设置显示几行

cols：设置显示几列

表单格式化：加table

<body>
<h1 align="center">用户注册</h1>
<table align="right">
    <tr>
        <td>用户名：</td>
        <td><input type="text"/></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="tel"/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" name="sex" /> 男
        </td>
        <td>
            <input type="radio" name="sex" /> 女
        </td>
    </tr>
    <tr>
        <td>如何得知这个机构的：</td>
        <td>
            <input type="checkbox" /> 朋友介绍
        </td>
        <td>
            <input type="checkbox" /> 听讲座知道的
        </td>
        <td>
            <input type="checkbox" /> 看到街边的广告知道的
        </td>
    </tr>
    <tr>
        <td>自我介绍：</td>
        <td>
            <textarea rows="5" cols="20"></textarea>
        </td>
    </tr>
    <tr>
        <td><input type="reset"/></td>
        <td align="right">
            <input type="submit" />
        </td>
    </tr>

</table>
</body>