HTML学习笔记
TITLE：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 Ⅲ
块级元素
在页面以块的形式展现
出现在新的一行
占全部宽度
<div></div>
<h1>...
<p>
内联元素
通常在块级元素内
不会导致文本换行
只占必要的部分宽度
<a>
<img>
<em>
<strong>
<a href="url" target="_blank">Lorem</a>
列表
list
<!---无序列表-->
<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>
表格
<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>
<!--用来设置编码方式，“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>
<!--用来设置编码方式，“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>
<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>
<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>
<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>
第七节 列表标签
无序列表：使用一组无序的符号定义，
<ul type>
<li></li>
</ul>
| 属性值 | 描述 | 用法举例 |
|---|---|---|
| circle | 空心圆 | |
| disc | 实心圆 | |
| square | 黑色方块 |
有序列表：使用一组有序的符号定义，
<ol type="a" start="1">
<li></li>
</ol>
| 属性值 | 描述 | 用法举例 |
|---|---|---|
| 1 | 数字类型 | |
| A | 大写字母类型 | |
| Ⅰ | 大写罗马数字类型 | |
| a | 小写字母类型 | |
| i | 小写罗马数字类型 |
demo 05
<!DOCTYPE html><html> <head> <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标签介绍
第十四节 框架集
