html学习

葵hh

已于 2023-03-25 18:04:00 修改

阅读量66

点赞数

文章标签： html 学习前端

于 2023-03-25 17:50:02 首次发布

本文链接：https://blog.csdn.net/m0_75047119/article/details/129766237

版权

web标准的构成

主要包括结构（Structure)，表现（Presentation)和行为（Behavior)三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，html
表现	表现用于设计网页元素的版式，颜色，大小等外观样式，CSS
行为	行为是指网页模型的定义及交互的编写，Javascript

Web标准提出的最佳体验方案：结构，样式，行为相分离。

什么是html?

html是指超文本标记语言（Hyper Text Markup Language),它是用来描述网页的一种语言。
html不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。

html基本结构标签（骨架标签）

标签名	定义及说明
html	html标签，根标签
head	文档的头部，必须设置title标签
title	文档的标题，让页面拥有一个属于自己的网页标题
body	文档的主体

网页开发工具

VSCode工具生成骨架标签新增代码

1.<iDOCTYPE>标签

文档类型声明，作用就是告诉浏览器使用哪种html版本来显示网页。
注意：该声明位于文档中的最前面的位置，处于<html>标签之前；该标签非html标签，是文档类型声明标签。
<iDOCTYPE html>

2.lang语言

用来定义当前文档显示的语言
1.en—英语
2.zh-CN—中文
定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

3.charset字符集

在<head>标签内，可以通过<meta>标签的charset属性来规定html文档应该使用哪种字符编码。
<meta charset=“UTF-8”/>

html常用标签

标题标签

<h1>~<h6>
大~~~~小
标题一共六级选，文字加粗一行显。
由大到小依此减，由重到轻随之变。

段落标签！

<p>我是一个段落标签</p>
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落与段落之间保有空隙。

换行标签！

<br />
特点：是单标签。

文本格式化标签

语义	标签
加粗	<strong></strong>或者<b></b>
倾斜	<em></em>或者<i></i>
删除线	<del></del>或者<s></s>
下划线	<ins></ins>或者<u></u>

<div>和 <span>标签

div（division),分割分区，一行只能放一个；
span,跨度跨区，一行可以放多个。
<div> 一个</div>
<span>多个</span>

图像标签和路径！

属性	属性值
scr	图片路径
alt	文本
title	文本
width	像素
height	像素
border	像素

图片: 在这里插入图片描述
图像标签属性注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

路径：
1.相对路径
如：
同级：<img= scr=“baidu.gif”/>
下一级：<img= scr=“image/baidu.gif”/>
上一级：<img= scr=“…/baidu.gif”/>
2.绝对路径
如：
“D:\web\img\logo.gif"或者"http://www.itcast.cn/images/logo.gif”

超链接标签！

<a href="跳转目标“ target="目标窗口的弹出方式”>文本或图像</a>
a为anchor的缩写
_self为默认值在本窗口打开，
_blank为在新窗口打开。

链接分类

注释和特殊字符

特殊字符：
在这里插入图片描述
空格，大于，小于最重要

表格标签

<table>
<thead>
<tr>
<th>表头</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>文字</td>
…

</tr>
…
</tbody>
</table>

表格属性在这里插入图片描述

合并单元格：

跨行合并:rowspan="合并单元格的个数“
跨列合并:colspan="合并单元格的个数“

列表标签

无序列表！

有序列表

自定义列表！

表单标签

通常由表单域，表单控件（表单元素），提示信息三部分构成。

表单域

<form action="url地址“ method="提交方式(get/post）” name="表单域名称“>
各种表单元素控件
</form>

表单控件（表单元素）

input输入表单元素

type属性的属性值及其描述如下：
在这里插入图片描述
<input type="属性值” />

下面展示一些相关代码。

<form action ="xxx.php" method="get">
<!--text 文本框 用户可以在里面输入任何位置-->
用户名：<input type="text" name="username" value="请输入用户名“ maxlength="6"> <br>
<!--password 密码框 用户看不见输入的密码-->
密码：<input type="password" name="pwd"> <br>
<!--radio 单选按钮 可以实现多选一-->
<!--name 是表单元素名字 这里性别单选按钮必须有相同的name才可以实现多选一-->
<!--单选按钮和复选框可以设置checked属性，默认选中-->
性别：男 <input type="radio" name="sex" value="男”> 女 <input type="radio" name="sex" value="女"> <br>
<!--checkbox 复选框 可以实现多选-->
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉" check="checked"> <br>
<!--点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器--> 
<input type="submit" value="免费注册"> 
<!--重置按钮可以还原到初始状态--> 
<input type="reset" value="重新填写"> 
<!--普通按钮button后期结合js使用--> 
<input type="button" value="获取短信验证码"> <br>
<!--文件域 使用场景 上传文件使用--> 
<input type="file"> 
</form>

除type外其他常用属性：
在这里插入图片描述

label标签

该标签为input元素定义标注(标签)。
该标签用于绑定一个表单元素当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：
<label for=“sex”>男</label>
<input type="radio” name=“sex” id=“sex” />

for属性应当与相关元素的id属性相同