搭配实例的HTML学习笔记（已完成待补充）_html潮流穿搭的案例-CSDN博客

本文链接：https://blog.csdn.net/weixin_45208900/article/details/107230122

编辑器推荐sublime

保存为html文件后才有语法高亮
要敲标签
例如p+tap自动补全<p></p>
html+tap=

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

1标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

这是一个标题

h1-h6 数字越大标题越小

2段落

  <p>这是段落1。</p>
  <p>这是段落2。</p>

这是段落1。

这是段落2。

3链接

  <a href="https://www.baidu.com/">这是一个链接</a>

这是一个链接
还可实现锚点跳转先简述后细说

4 图像

默认目录为当前html文件的目录
图片可以用相对路径/绝对路径
src是地址 alt是加载失败显示的后面的是尺寸

<img src="https://i-blog.csdnimg.cn/blog_migrate/a7fd529daa183a7066484369d8f9153f.jpeg" alt="显示不出来" width="304" height="228">

1-4补充说明

href和src的区别是
href 用于在当前文档和引用资源之间建立联系
src 用于替换当前元素
前者引用后者引入

换行标签

123
<br>
123

123

123

5水平线标签

<hr>

本文到处都是

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

它不会显示的

6粗体斜体

<b>与<i> 定义粗体或斜体文本

<strong> 或者 <em>意味着你要呈现的文本是重要的 
前者效果和b一样
后者和i一样

<b>1</b>
<strong>1</strong>

123
123

<i>123</i>
<em>123</em>

123
123

7锚点跳转

<a id="01">跳转终点</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#01">跳转起点</a>

跳转终点

 跳转起点

8头部元素

<head> 元素包含所有头部标签元素
在 <head>元素中可以插入脚本（scripts）
 样式文件（CSS）各种meta信息。

可以添加在头部区域的元素标签为: 
	<title>
	<style>
	<meta>
	<link> 
	<script>
	<noscript> 
 	<base>

base可以设置一个相对基准url 但我不知道咋用
link是用来链接css文件的我不会css
style和css一块说吧

meta描述了一些东西
比如

<meta name="author" content="ID：weixin_45208900">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

<script>标签用于加载脚本文件 和js一起说

9表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

<table border="1" width="600px" height="300px" align="center">
	<caption><h2>学生信息表</h2></caption>
	<thead bgcolor="cyan">	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>性别</th>
	</tr></thead>
	<tbody bgcolor="#cccccc">
		<tr>
		<td>01</td>
		<td>小明</td>
		<td>15</td>
		<td>b</td>
	</tr>
		<tr>
		<td>02</td>
		<td>小红</td>
		<td>16</td>
		<td>g</td>
	</tr>
		<tr>
		<td>03</td>
		<td>小蓝</td>
		<td>17</td>
		<td>b</td>
	</tr>
		<tr>
		<td>04</td>
		<td>小绿</td>
		<td>18</td>
		<td>g</td>
	</tr>
		<tr>
		<td>05</td>
		<td>小紫</td>
		<td>20</td>
		<td>b</td>
	</tr>
	<tfoot bgcolor="#AACC00"><tr>
	<td width="25%" >总计人数</td>
	<td colspan="3">5</td>
</tr></tfoot>
	</tbody>
</table>

学生信息表
学号	姓名	年龄	性别
01	小明	15	b
02	小红	16	g
03	小蓝	17	b
04	小绿	18	g
05	小紫	20	b
总计人数	5

在这里插入图片描述

表格三要素 table、tr、td 缺一不可。

<table> 标签常用属性：
border="1"   表格边框的宽度
bordercolor="#AACC00"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式  
(参数有 left center right)
bgcolor="#AACC00"   表格整体的背景色
<tr> 标签的常用属性:
bgcolor="#AACC00"    行的颜色
align="right"    行内文字的水平对齐方式    
(参数有left、center、right)
valign="top"     行内文字的垂直对齐方式   
(参数有top、middle、bottom)
 
<td>、<th> 标签的常用属性:
width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="#AACC00"  单元格的背景色
align="right"  单元格文字的水平对齐方式  
(参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    
(参数middle、bottom、top)

引号里的数字和颜色代码均可以更改。

表格结构语义标签：
 1.<table>：表格根元素。
 2.<thead>：表格头。
 3.<tbody>：表格体。
 4.<tfoot>：表格尾，一般可忽略该结构。
 5.<tr>：表格行。
 
表格内容标签：
 1.<th>：表头单元格。
 2.<td>：表体单元格。
跨列：colspan
跨行：rowspan

单元格内边距：cellpadding
单元格外边距：cellspacing

10列表

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Cola</li>
</ul>

Coffee
Milk
Cola

<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Cola</li>
</ol>

Coffee
Milk
Cola

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
<dt>Cola</dt>
<dd>- my love</dd>
</dl>

Coffee

- black hot drink

Milk

- white cold drink

Cola

- my love

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

编号列表：

Apples
Bananas
Lemons
Oranges

大写字母列表：

Apples
Bananas
Lemons
Oranges

小写字母列表：

Apples
Bananas
Lemons
Oranges

罗马数字列表：

Apples
Bananas
Lemons
Oranges

小写罗马数字列表：

Apples
Bananas
Lemons
Oranges

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

圆点列表：

Apples
Bananas
Lemons
Oranges

圆圈列表：

Apples
Bananas
Lemons
Oranges

正方形列表：

Apples
Bananas
Lemons
Oranges

markdown显示的可能和浏览器显示的不一样

也许是渲染不一样建议自行尝试

11块级元素

会以新行来开始（和结束）

比如<h1>, <p>, <ul>, <table> <div>

div一般和css一起用没啥特殊含义

12内联元素

比如 <b>, <td>, <a>, <img>  <span>

与div一样 span也和css一起用也没啥特殊含义

13表单元素

type属性来定义以下类型
在这里插入图片描述

复选框和单选框类似
在这里插入图片描述
以下是我练手时敲的一个东西

<h2>用户注册</h2>
<form action="" method="post" enctype="">
	用户名：<input type="text" name="username" value="tom" size="10" maxlength="6" readonly><br>
	密码：<input type="password" name="pwd"><br>
	年龄<input type="text" name="age" disabled value="20">
	性别：<input type="radio" name="sex" value="male" checked>
	<input type="radio" name="sex" value="female"><br>
	爱好：<input type="checkbox" name="hobby" value="eat" checked>吃饭
	<input type="checkbox" name="hobby" value="eat" checked>聊天
	<input type="checkbox" name="hobby" value="eat" checked>玩游戏 <br>
	头像：<input type="file" name="head">
	<input type="submit" name="注 册">
	<input type="reset" name="重 置">
	</form>

效果如下
在这里插入图片描述
下拉列表

例子如下

城市：
<select name="city">
<optgroup label="江苏">
	<option value="nanjing">南京</option>
	<option value="yangzhou">扬州</option>
	<option value="xuzhou">徐州</option>
	<option value="huaian">淮安</option>
	<option value="yangcheng">盐城</option>
</optgroup>
<optgroup label="山东">
	<option value="qingdao">青岛</option>
	<option value="rizhao">日照</option>
	<option value="jinan">济南</option>
	<option value="weihai">威海</option>
</optgroup>

textarea标签多行文本框如下
属性也就三个
name rows cols

<textarea name="intro" rows="10" cols="30" readonly="">
	请遵守法规
	请遵守法规
	请遵守法规
	请遵守法规
	请遵守法规
	请遵守法规
</textarea>

14html5新增元素

结构标签

语义标签

在这里插入图片描述

表单相关
在这里插入图片描述

多媒体
在这里插入图片描述

搭配实例的HTML学习笔记（已完成 待补充）

编辑器推荐sublime

1标题

这是一个标题

这是一个标题

这是一个标题

2段落

3链接

4 图像

5水平线标签

6粗体斜体

7锚点跳转

8头部元素

9表格

学生信息表

10列表

编号列表：

大写字母列表：

小写字母列表：

罗马数字列表：

小写罗马数字列表：

圆点列表：

圆圈列表：

正方形列表：

11块级元素

12内联元素

13表单元素

14html5新增元素

搭配实例的HTML学习笔记（已完成待补充）