HTML学习笔记

繁星依月

已于 2024-01-29 23:00:03 修改

阅读量1k

点赞数 22

分类专栏：开发技术学习笔记文章标签： html 学习笔记

于 2024-01-20 21:55:50 首次发布

本文链接：https://blog.csdn.net/Ding_Yifan/article/details/135722609

版权

开发技术学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML学习笔记

为初学者准备的：HTML速成

HTML Crash Course For Beginners

Part Ⅰ

超文本标记语言，不是编程语言，告诉浏览器如何构造网页
```
<p>Lorem ipsum dolor sit amet</p>
```
起始标签+内容+结束标签

Part Ⅱ

<!DOCTYPE html> ——> 用来解释文档的类型

<html>
    <head>
        
    </head>
    
    
    <body>
        
        
    </body>
</html>

Part Ⅲ

01 块级元素

在页面以块的形式展现，出现在新的一行，占全部宽度
```
<div></div>
<h1>...
<p>
```

02 内联元素

通常在块级元素内，不会导致文本换行，只占必要的部分宽度

<a>
<img>
<em>
<strong>
<a href="url" target="_blank">Lorem</a>

03 列表

<!---无序列表-->
<ul>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
</ul>
<!---有序列表-->
<ol>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
</ol>

04 表格

<table>
    <thead>
    	<th>first name</th>
        <th>last name</th>
        <th>age</th>
    </thead>
</table>

JavaWeb教程-HTML零基础入门

一、html简介

什么是html
- 超文本标记语言
html能做什么
- 通过标记标签描述网页
html书写规范
- 标签是以尖括号包围的关键字
- 格式：属性=‘属性值’ //多个属性之间空格隔开
- 不区分大小写，建议全小写

二、结构标签

网页基本结构

<html>:根标签
	<head>:网页头标签
		<title></title>:页面的标题
	</head>
    <body></bodybody>:网页正文

嵌套结构
带/的是结束部分，没有/是开始部分

属性名	代码	描述
text		设置网页正文中所有文字的颜色
bgcolor		设置网页的背景色
background		设置网页的背景图

颜色的两种表示方式

01.英文单词 eg：res

02.16进制表示颜色 eg：#000000

demo 01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	<!--用来设置编码方式，“UTF-8”涵盖中文字符-->
		<title></title>	<!--标题-->
	</head>
	<body text="red" bgcolor="bisque" background="C:\Users\86152\Downloads\HBuilderX.3.1.12.20210428\HBuilderX\readme\logo.png">
			hello，world！
	</body>
</html>

三、RGB颜色和相对路径

demo 01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	<!--用来设置编码方式，“UTF-8”涵盖中文字符-->
		<title></title>	<!--标题-->
	</head>
	<body text="red" bgcolor="#ff" background="adress">
			hello，world！
	</body>
</html>

地址：..表示向上一级去找父目录	eg：../pic/logo.png

程序员计算器

HEX——十六进制

DEC——十进制

OCT——八进制

BIN——二进制

四、排版标签

可用于实现简单的页面布局

注释标签：

换行标签：

段落标签：

文本文字

特点：段与段之间有空行

属性：align对齐方式（left、center、right）

水平线标签:

属性

——width：水平线的长度（两种：第一种-像素表示；第二种-百分比表示）

——size：水平线的粗细（像素表示，eg：10px）

——color：水平线的颜色

——align：水平线的对齐方式

demo 02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排版标签</title>
	</head>
	<body>
		<!--换行-->
		换<br>行
		<!--段落-->
		<p>段落1</p>
		<p align="center">段落2</p>
		<p align="right">段落3</p>
		<!--水平线-->
		<hr width="50%" align="left" color="#f00" size="7">
	</body>
</html>

五、块标签和文字标签

demo 03

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>div标签1<font color="#f00" size="5">div标签1</font></div>
		<div>div标签2</div>
		<div>div标签3</div>
		<!--div宽度默认是其外层容器的宽度-->
		<span>span标签1</span>
		<span>span标签2</span>
		<span>span标签3</span>
	</body>
</html>

使用CSS+div是现下流行的一种布局方式

标签	代码	描述
div		行级块标签，独占一行，换行
span		行内块标签，所有内容都在同一行

，处理网页中文字的显示方式

属性名	代码	描述
size		用于设置字体的大小、最小1号，最大7号
color		用于设置字体的颜色
face		用于设置字体的样式

六、文本格式化标签和标题标签

文本格式化标签

使用标签实现标签的样式处理

标签	代码	描述
b		粗体标签
strong		加粗
em		强调字体
i		斜体
small		小号字体
big		大号字体
sub		上标标签
sup		下标标签
del		删除线

标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签	代码	描述
h1		1号标题，最大字体
h2		2号标题
h3		3号标题
h4		4号标题
h5		5号标题
h6		6号标题，最小字体

demo 04

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<b>粗体</b><Strong>粗体</strong>
		<br>
		<em>斜体</em><i>斜体</i>
		<big>大号</big><small>小号</small>
		上标：5m<sup>2</sup> 下标：H<sub>2</sub>O
		<br>
		<del>删除</del>
		<h1>最大</h1>
		<h2>二</h2>
		<h3>三</h3>
		<h4>四</h4>
		<h5>五</h5>
		<h6>六</h6>
	</body>
</html>

七、列表标签

无序列表：使用一组无序的符号定义，

//un-

<ul type>
    <li></li>
</ul>

属性值	描述	用法举例
circle	空心圆
disc	实心圆
square	黑色方块

有序列表：使用一组有序的符号定义，

//order

<ol type="a" start="1">
    <li></li>
</ol>

属性值	描述	用法举例
1	数字类型
A	大写字母类型
Ⅰ	大写罗马数字类型
a	小写字母类型
i	小写罗马数字类型

demo 05

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		无序列表<br>		<ul type="circle">			<li>规格严格</li>			<li>功夫到家</li>		</ul>		有序列表<br>		<ol type="i" start="4">			<li>哈工大</li>			<li>哈哈哈0</li>			<li>哈哈哈1</li>			<li>哈哈哈2</li>			<li>哈哈哈3</li>			<li>哈哈哈4</li>		</ol>		嵌套列表<br>		无序列表<br>		<ul type="circle">			<li>规格严格</li>			<ol type="i" start="4">				<li>哈工大</li>				<li>哈哈哈0</li>				<li>哈哈哈1</li>				<li>哈哈哈2</li>				<li>哈哈哈3</li>				<li>哈哈哈4</li>			</ol>			<li>功夫到家</li>		</ul>	</body></html>

八、图形标签

在页面指定位置处中引入一幅图片，

属性名	描述
src	引入图片的地址
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息
hspace	在图片的左右设定空白
vspace	在图片的上下设定空白

demo 06

第九节链接标签
第十节基本表格标签
第十一节基本form表单
第十二节 input标签
第十三节 select标签和textarea标签介绍
第十四节框架集

HTML实践知识补充

form标签

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

参数：action、method
- action：点击提交按钮时，表单内的数据会提交到action所确定的页面中
- method：表单数据发送数据给服务器的请求类型 [ get | post ]

input标签

<input type="表单类型" value="XXX" />

繁星依月

关注

22
点赞
踩
20

收藏

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

什么是html超文本标记语言html能做什么通过标记标签描述网页html书写规范标签是以尖括号包围的关键字格式：属性=‘属性值’ //多个属性之间空格隔开不区分大小写，建议全小写。
复制链接

扫一扫

专栏目录

HTML学习笔记

HTML学习笔记

为初学者准备的：HTML速成

Part Ⅰ

Part Ⅱ

Part Ⅲ

01 块级元素

02 内联元素

03 列表

04 表格

JavaWeb教程-HTML零基础入门

一、html简介

二、结构标签

网页基本结构

颜色的两种表示方式

demo 01

三、RGB颜色和相对路径

demo 01

程序员计算器

四、排版标签

demo 02

五、块标签和文字标签

demo 03

六、文本格式化标签和标题标签

文本格式化标签

标题标签

demo 04

七、列表标签

demo 05

八、图形标签

demo 06

HTML实践知识补充

form标签

input标签

“相关推荐”对你有帮助么？