HTML入门

最新推荐文章于 2024-07-17 09:43:10 发布

dxy18861848756

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量108

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/dxy18861848756/article/details/119492351

版权

初识HTML

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等

W3C标准包括：
（1）结构化标准语言（HTML、XML）
（2）表现标准语言（CSS）
（3）行为标准（DOM、ECMAscript）

HTML中的注释：

<!--  你的注释  -->

第一句话：

<!DOCTYPE html>

告诉浏览器，我们需要什么规范。

总标签：

<html lang="en">    </html>

所有的内容都必须写在总标签里面。

总标签中，有head标签和body标签。

<!-- head标签代表网页头部 -->
<head>
	<!-- meta描述性标签 -->
	<meta charset="UTF-8">
	<meta name="keywords" content="HTML入门">
	<meta name="description" content="这是HTML笔记">
	<!-- title网页标题 -->
	<title>Title</title>
</head>
<!-- body标签代表网页内容 -->
<body>
Hello,World!
</body>

网页基本标签

1.标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

2.段落标签

<p>段落标签</p>
<p>段落标签</p>

3.换行标签

第一行<br/>第二行

4.水平线标签

第一行<hr/>第二行

5.字体样式标签

<strong>粗体</strong>
<em>斜体</em>

6.特殊符号

空&nbsp;格  <br/>
大于号&gt; 小于号&lt; 版权符号&copy;

图像，超链接，网络布局

1.图像标签

<img src="path" alt="text" title="text" width="x" height="y" />

src代表图像地址，alt代表图像的替代文字，title代表图片悬停文字，width是图片宽度，height是图片高度。

2.链接标签

页面间链接：

<a href="path" target=""目标窗口位置">链接文本或图像</a>

href是链接路径，target是链接在哪个窗口打开，可以是_self，_blank。a标签其中的内容也可以是图像标签。

锚链接：

<a id="top">顶部</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#top">回到顶部</a>

也可以实现不同页面间锚链接的跳转，譬如

<a href="index.html#bottom">底部</a>

就可以回到主页的底部。

功能性链接：
发邮件：

<a href="mailto:邮箱地址">联系我</a>

还可以有qq的链接。

3.块元素和行内元素

块元素：无论内容多少，该元素独占一行
p，h1-h6

行内元素：内容撑开宽度，左右都是行内元素的可以排在一起
a，strong，em

列表、表格、媒体元素

1.列表标签

（1）有序列表

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>

（2）无序列表

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

（3）自定义列表

<dl>
<dt>列表标题</dt>

<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>

<dt>列表标题</dt>

<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>

2.表格标签

<table border="1px">
<tr>
	<td colspan="3" align="center">1-1</td>
</tr>
<tr>
	<td rowspan="2">2-1</td>
	<td>2-2</td>
	<td>2-3</td>
</tr>
<tr>
	<td>3-2</td>
	<td>3-3</td>
</tr>
</table>

colspan表示跨列，rowspan表示跨行。

3.媒体元素

视频元素：

<video src="1.mp4" controls="controls" autoplay="autoplay"> </video>

音频元素：

<audio src="1.mp3" controls="controls" autoplay="autoplay"> </audio>

4.页面结构分析

元素名	描述
header	标题头部区域的内容
footer	标题脚部区域的内容
section	web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>

5.iframe内联框架

<iframe src="https://www.baidu.com" width="1200px" height="1000px"> </iframe>

<iframe src="" name="hello" width="1000px" height="800px"> </iframe>
<a href="https://www.baidu.com" target="hello">点我</a>

表单及表单应用

1.表单语法

<form method="get" action="http://localhost:8080/user/h">
<p> <input type="text" name="username"></p>
<p> <input type="password" name="pwd"> </p>
<p> <input type="submit"> <input type="reset"> </p>
</form>

method：post和get两种方式
get方式提交：可以在url中看见提交的信息，不安全，高效
post方式提交：比较安全，传输大文件

action：表单提交的位置，可以是网站，也可以是请求处理地址

input的type：text输入框，password密码框，submit提交按钮，reset重置按钮

对应的后端代码：

@RestController
@RequestMapping("/user")
public class HelloController {
    @GetMapping("/h")
    void h(@RequestParam String username,@RequestParam String pwd){
        System.out.println("我已收到"+username+pwd);
    }
}

2.文本框和单选框

属性	说明
type	指定元素的类型，可以是text，password，checkbox，radio，submit，reset，file，hidden，image，button。默认为text。
name	指定表单元素的名称
value	元素的初始值。type为radio的时候必须指定一个值。
size	指定表单元素的初始宽度。当type为text或者password时，以字符为单位；否则以像素为单位
maxlength	type为text或者password时，表示输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

单选框标签：

<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女

checked表示默认勾上

3.按钮和多选框

多选框标签：

<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="code" name="hobby" checked>代码
<input type="checkbox" value="chat" name="hobby">聊天

按钮标签：

<input type="button" name="btn1" value="按钮">
<input type="image" src="path">

4.列表框文本域和文件域

下拉框标签：

<p>国家：
	<select name="country">
		<option value="china">中国</option>
		<option value="us">美国</option>
		<option value="japan" selected>日本</option>
	</select>
</p>

selected表示一开始默认选择的是哪个

文本域：

<textarea name="textarea" cols="50" rows="10"> 文本内容</textarea>

文件域：

<input type="file" name="files">

5.搜索框滑块和简单验证

邮箱验证和url验证和数字验证：

<input type="email" name="email">
<input type="url" name="url">
<input type="number" name="number" max="100" min="0" step="10">

滑块：

<input type="range" name="voice" min="0" max="100" step="2">

搜索框：

<input type="search" name="search">

6.表单的应用

只读属性：readonly
禁用属性：disabled
隐藏属性：hidden

增强鼠标可用性：

<label for="mark">点我</label>
<input type="text" id="mark">

表单初级验证

placeholder属性：用于提示

<input type="text" placeholder="提示">

required属性：非空

<input type="text" required>

pattern属性：正则表达式判断

<input type="text" pattern="正则表达式">

dxy18861848756

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

初识HTMLHyper Text Markup Language（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等W3C标准包括：（1）结构化标准语言（HTML、XML）（2）表现标准语言（CSS）（3）行为标准（DOM、ECMAscript）...
复制链接

扫一扫