html的入门笔记

最新推荐文章于 2023-06-18 09:29:34 发布

小小城序员

最新推荐文章于 2023-06-18 09:29:34 发布

阅读量256

点赞数 2

分类专栏： html 笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_46791942/article/details/107546758

版权

笔记同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

html入门笔记

这些都是本人（小白）在学习html过程中记录下的笔记，都是些基础的知识(可能(一定)会有遗漏)

html的简介

什么是html？

html是用来描述网页的一种语言，是一种超文本标记语言，而不是编程语言。

html的标签

html标记标签通常被称为html标签,html的标签通常是成对出现的，第一个是开始标签，第二个是结束标签。也有部分标签是单便签

格式通常为:<标签>内容</标签>

一个简单的html

<!DOCTYPE html>    <!--文档类型-->
<html>
<head>
<meta charset="utf-8">     <!--采用utf-8字符集-->
<title>页面标题</title>
</head>
<body>
内容             <!--使用html标签-->
</body>
</html>

html中常用的标签

html的标题

字体大小顺序:h1>h2>h3>h4>h5>h6

<h1>这是第一个标题</h1>
<h2>这是第二个标题</h2>
<h3>这是第三个标题</h3>
<h4>这是第四个标题</h4>
<h5>这是第五个标题</h5>
<h6>这是第六个标题</h6>

html的段落

<p>这是一个段落</p>

html的水平线

<hr/>

html的换行

<br/>

html的注释

<!--这是一个注释-->

html的分组

div与span标签通常与css的使用有关

<div>这是一个块级元素</div>
<span>这是一个内联元素</span>

html的文本格式化

<b>这是一个加粗标签</b>
<i>这是一个斜体标签</i>
<s>这是一个加删除线标签</s>
<u>这是一个加下划线标签</u>
<sub>这是一个下标标签</sub>
<sup>这是一个上标标签</sup>

html的图像

<img src="图像的路径">

图像属性的设置：

属性	描述
src	图片的路径
alt	图片无法显示时替换的文本
width	设置图像的宽度
height	设置图像的高度

html的超链接

<a href="跳转到的网址" target="目标窗口跳出的方式">这是一个超链接</a>

html的书签链接

使用相同的标识名设置书签链接，可以快速定位到目标位置

<p id="id1">目标位置</p>
<a href="#id1">这是一个书签连接</a>

html的特殊字符

html中有些特殊字符是预留字符，必须使用字符实体才能正常显示

特殊字符	描述	字符实体
	空格	& nbsp;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& amp;
"	引号	& quot;
¢	分	& cent;
£	镑	& pound;
¥	人民币	& yen;
€	欧元	& euro;
§	小节	& sect;
©	版权	& copy;
®	注册商标	& reg;
™	商标	& trade;
×	乘号	& times;
÷	除号	& divide;

html的列表

html的列表包括了无序列表与有序列表，以及自定义列表

<!--无序列表-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

<!--有序列表-->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>

<!--自定义列表-->
<dl>
<dt>自定义列表项目</dt>
<dd>自定义列表项的描述1</dd>
<dd>自定义列表项的描述1</dd>
</dl

html的下拉菜单

<select>
<option>这是一个选项</option>
<option>这也是一个选项</option>
<option>这还是一个选项</option>
</select>

html的表格

简单的理解：tr代表行，td代表列，其中th代表表头，会自动将文字加粗
合并表格中的单元格：colspan（合并列），rowspan（合并行）

<table border="1">   
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td colspan="2">(1,1)(2,1)</td>      <!--合并（1,1）和（2,1）-->
</tr>
<tr>
<td >(2,1)</td>
<td>(2,2)</td>
</tr>
<tr>
<td>(3,1)</td>
<td>(3,2)</td>
</tr>
</table>

表格的属性设置：

属性	描述
align	设置表格的对齐格式
bgcolor	设置表格的背景颜色
border	设置表格边框的宽度
cellpadding	设置单元格内容与单元格边框的距离
cellspacing	设置两个单元格之间的距离
width	设置表格宽度
height	设置表格高度

html的表单

表单元素是允许用户在表单中输入内容,比如：文本域、单选框、复选框,按钮等等。

<form action="url" method="提交方法（get/post）">
user:<input type="text">    <!--文本域-->
<br/>
password:<input type="password">       <!--密码字段不会显示明文-->
<br/>
gender：<input type="radio" name="sex" >Male   <!--单选按钮(设置一样的name)-->
<input type="radio" name="sex" >Female
<br/>
hobby:<input type="checkbox" name="hobby" >basketball<br>   <!--复选框-->
<input type="checkbox" name="bobby" >football
</form>

input标签中type属性

type属性	描述
text	文本输入框
password	密码输入框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
file	文件提交按钮
image	图像提交按钮

end!

小小城序员

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html的入门笔记

html入门笔记这些都是本人（小白）在学习html过程中记录下的笔记，都是些基础的知识(可能(一定)会有遗漏)html的简介什么是html？html是用来描述网页的一种语言，是一种超文本标记语言，而不是编程语言。html的标签 html标记标签通常被称为html标签,html的标签通常是成对出现的，第一个是开始标签，第二个是结束标签。也有部分标签是单便签格式通常为:<标签>内容</标签>一个简单的html<!DOCTYPE html> <!
复制链接

扫一扫