HTML笔记

最新推荐文章于 2024-07-17 16:17:24 发布

尘世猫

最新推荐文章于 2024-07-17 16:17:24 发布

阅读量131

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_42838061/article/details/104209636

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

web标准的构成：主要包括结构、表现、行为

标准	说明
结构	结构用于对网页元素进行分类，现阶段主要是学html
表现	表现用于设置网页元素格式、颜色、大小等外观样式、主要是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

HTML语法规范

和markdown语法有点类似，所有内容写在<html></html>这对标签内

标签关系：包含关系和并列关系

<head>
      <title> </title> 
      <!-- 包含关系 -->
<head>

<head> </head>
<body> </body>
<!-- 并列关系 -->

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></headl>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标签	让页面有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE>标签：文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页，这个声明位于文档中的最前位置，在<html>之前，它不是标签，只是声明
lang语言：用来定义当前文档显示的语言；en为英语，zh-CN定义语言为中文
charset字符集：字符集是多个字符的集合，以便计算机能够识别和存储各种文字。<meta charset="UTF-8"/>,UTF-8也被称为玩过吗，基本包含了全世界所有国家需要使用的字符

HTML常用标签

标题标签<h1>-<h6>

<h1>我是一个一级标签</h1>

段落和换行标签：

段落标签在段落之间有间隙，会根据浏览器根据窗口大小调整
<p>我是一个段落标签</p>
<br />换行，没有间隙

文本格式化标签：

粗体、斜体、下划线

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

<div>和<span>是没有语义的，他们是一个盒子，用来装内容
特点：

<div>标签用来布局，但是现在一行只能放一个<div>，大盒子
<span>标签用来布局，一行上可以放多个<span>，小盒子

图像标签

<img src="图像URL"/>

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时，用该文字替换
title	文本	提示文本，鼠标放到图片上，显示的文字
width、height、border	像素	设置图像的宽、高、边框粗细

相对路径：斜杠方向向左

同一级路径：图像文件位于HTML文件同一级如<img src="baidu.gif" />
下一级路径：图像文件位于HTML下一级<img src="image/baidu.gif" />
上一级路径：图像文件位于HTML上一级<img src="../baidu.gif" />

相对路径：斜杠方向向右，指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例如：“D:\web\img\logo.gif"或者完整的网络地址"http://www.itcast/images/logo.gif”

链接标签：

<a href="跳转目标" target="目标窗口弹出方式">文本图像</a>
<!-- href 用于指定链接目标的URL地址，是必须属性 -->
<!-- target指定打开方式，_self为默认值，_blank为新窗口打开 -->

链接标签分类：

如果是下载链接，地址链接的是.exe或者.zip等压缩包形式；
如果是内部链接，跳转目标是html文件名；
图片、视频、音频、文本都可以添加超链接,例如<a href="跳转目标" target="目标窗口弹出方式"><ima src="img.jpg"></a>；
href="#"表示空链接
锚点链接：
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href=#two>第二集</a>
- 找到目标位置标签，里面添加一个id属性=名字，如<h3 id="two">第二集介绍</h3>

注释标签

快捷键ctrl+/

<!-- 我想和手磨咖啡 -->

特殊字符: 在这里插入图片描述

表格标签：

<table align="center">
    <tr>
        <td>单元格内文字</td>
        ...
    </tr>
    ...
</table>

<tr></tr>用于定义表格中的行，必须在<table></table>标签内
<td></td>用于定义表格中的单元格，必须在<tr></tr>>标签内
<th></th>表头单元格标签，表头会加粗居中

表格属性：

属性名	属性值	描述
align	left,right,center	规定表格位置
border	1或""	规定表格单元是否有边框，默认""
cellpadding	像素值	规定单元边沿与其内容之间空白
cellspacing	像素值	规定单元内容之间空白
width	像素值或百分比	规定表格宽度

示例

<table cellspacing="0">
				<thead >
					<tr>
						<td class="pl10 e1">统计项</td>
						<td class="e2">沪市</td>
						<td class="pr10 e3">深市</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td >股票只数</td>
						<td>{{= stat[0] }}</td>
						<td >{{= stat[1] }}</td>
					</tr>
				<tbody>
</table>
<!-- <thead></thead>包裹表头 -->
<!-- <tbody></tbody>包裹表格内容 -->

合并单元格：

跨行：rowspan=“数字”最上侧单元格为目标单元格，写合并代码
跨列：colspan="数字"最左侧单元格为目标单元格，写合并代码
被合并的单元格的代码要删除

列表

<ul>里面只能放<li>标签表示html页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
<ol>标签表示html页面中项目的有序列表

<ul>
	<li>列表项1</li>
	<li>列表项1</li>
</ul>

<ul></ul>里面只能放<li><li>，放其余标签是不允许的
<li><li>相当于一个容器，允许容纳所有元素，除了文字还有图片等等都可以

自定义列表

<dl>标签用于定义描述列表，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
</dl>

表单标签

一个表单通常由表单域、表单控件、提示信息3部分构成
<form>标签用于定义表单域，它会把范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式(get/post)" name="表单域名称">
</form>

表单控件：1.input输入表单元素;2.select下拉表单元素;3.textarea文本域元素

<input type="属性值" name="表单元素名字" value="框框中默认出现的内容"> 
<!-- name是表单元素名字，要求单选按钮和复选框要有相同的name值 -->
<!-- name和value是每个表单元素都有的属性值，主要供后台使用 -->

<lable>标签为input元素定义标注
<lable>标签用于绑定一个表单元素，当点击<lable>标签内文本时，浏览器会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验

<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex" />
<!-- <lable>标签的for属性应当与相关元素的id属性相同 -->

<select>标签用于多选元素

<select>
	<option>选项1</option>
	<option selected="selected">选项2</option>
</select>
<!-- 当<option>中定义selected="selected"时，该选项为默认选项 -->

<textarea>文本域

<textarea rows="3" cols="20">
	文本内容
</textarea>

尘世猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记

web标准的构成：主要包括结构、表现、行为标准说明结构结构用于对网页元素进行分类，现阶段主要是学html表现表现用于设置网页元素格式、颜色、大小等外观样式、主要是CSS行为行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScriptHTML语法规范和markdown语法有点类似，所有内容写在<html></html&gt...
复制链接

扫一扫