HTML学习笔记

痴长几岁

已于 2022-01-23 01:16:51 修改

阅读量152

点赞数 1

分类专栏：自己的一些学习笔记文章标签： html html5

于 2021-09-03 19:14:42 首次发布

本文链接：https://blog.csdn.net/qq_50121370/article/details/120004699

版权

自己的一些学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html><!-->指定文档版本，这个是指最新的html版本<!-->
<html lang="zh-CN"><!-->说明当前网页中文网页<!-->
<head>
    <meta charset="UTF-8"><!-->指定使用的字符集，不写这个标签会出现乱码情况<!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

meta标签：标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

1.< html>< /html> 根标签
2.< head>< /head> 文档的头部
3.< title>< /title> 文档的标签
4.< body>< /body>文档的主体
5.< h1>–< h6> 标题标签
6.< p>< /p>段落标签
7.< br/>换行标签
8.< strong>< /strong>文字加粗
9.< em>< /em>或< i>< /i>文字倾斜
10.< del>< /del>或< s>< /s>文学删除
11.< ins>< /ins>或< u>< /u>下划线
12.< div>< /div>与< span> < /span>盒子标签
div 一行一个大盒子
span 一行多个小盒子
13.< img src=“图像的URL”/>
关于图像标签的一些属性

属性	属性值	说明
src	图片路径	必须的属性
alt	文本	当图片不能显示时，显示该文字
title	文本	提示文本
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置边框粗细

14.< a href=“跳转目标” target=“目标窗口的弹出方式” >文本或图像< /a>超链接标签
外部链接的格式：https://editor.csdn.net
target 的一些值 _self 为默认值 _blank为在新窗口打开方式
空链接：#
内链接：文件路径
如果链接里面给的是一个文件，则会下载这个文件。
锚点链接：在href属性中，设置属性值为 #名字的形式
15.特殊字符

特殊字符	描述	字符的代码
	空格	&nbsp；
<	小于号	&it；
>	大于号	&gt；
&	和号	&amp
¥	人民币	&yen；
±	正负号	&plusmn；
X	乘号	&times；
÷	除号	&divide；

16.表格

<table>
	<tr>
		<th>表头属性</th>
		...
	</tr>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

a.< table>< /table>是用于定义表格的标签
b.< tr>< /tr>用于定义表格中的行，必须嵌套在< table>< /table>标签中。
c.< th>< /th>表头单元格

有关表格的部分属性

属性名	属性值	描述
align	left、center、right	规定性对周围元素的对其方式
border	1或""	规定表格单元是否有边框，默认为" ",表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或者百分比	规定表格高度

d.< thead>< /thead> < tbody>< /tbody>表格结构标签
e.跨行合并：rowspan=“合并单元格个数”
跨列合并：colspan=“合并单元格个数”
17.列表
a.无序列表

<ul>
	<li>苹果</li>
	<li>梨子</li>
	<li>西瓜</li>
</ul>

b.有序列表

<ol>
	<li>苹果</li>
	<li>梨子</li>
	<li>西瓜</li>
</ol>

通过list-style:none样式代码可以去除调li中文字的样式。
c.自定义列表

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

18.表单标签
HTML中一个完整的表单通常由表单域，表单控件（也称为表单元素和提示信息3个部分组成。

表单域：一个包含表单元素的区域
< form action=“url地址” method=“提交方式” name=“表单域名称”>
各种表单元素控件
< /form>

表单控件（表单元素）
a.< input>输入表单元素
< input type=“属性值” />
< input/>标签为单标签，type属性设置不同的属性值用来指定不同的控件类型。

< /table>

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清楚表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符

<form action = "xxx.php" method = ""get>
	用户名：<input type = "text" value = "输入用户名"><br/>
	密码: <input type = "password" name = "pws"><br/>
	记住密码<input type = "checkbox" value = "istrue" checked = "checked">
	自动登录<input type = "checkbox" value = "autosubmit"><br/> 
    教师登录<input type="radio" name = "1">学生登录<input type="radio" name = "1"><br/>
    <input type = "submit" value = "登录"><input type="reset"><br/>
    <input type="button" value="这是一个没有任何卵用的按钮"><br/>
    上传头像: <input type="file" id="shangchuantx"><label for="shangchuantx">点击我也可以上传头像哟！</label>
</form>

关于input属性，出type属性以外的其他常用属性。

属性	属性值	描述
name	由用户自定义	定义input的名称。
value	由用户自定义	规定input元素的值。
checked	checked	规定此input元素首次加载时应当被选中。
maxlength	正整数	规定输入字段中的字符的最大长度。

b.< select>下拉表单元素

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

c.< textarea>文本域标签

<textarea row="3" clos="20">文本域内容</textarea>

在option标签中定义selected = "selected"时，当前项即为默认选中项
19.< label>标签
< label>标签为input元素定义标注（标签）。
< label>标签用于绑定一个表单元素，但点击< label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上增加用户体验。

痴长几岁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML学习笔记

1.< html>< /html> 根标签2.< head>< /head> 文档的头部3.< title>< /title> 文档的标签4.< body>< /body>文档的主体5.< h1>–< h6> 标题标签6.< p>< /p>段落标签7.< br/>换行标签8.< strong>< /strong>文
复制链接

扫一扫

专栏目录