HTML相关笔记（一）

最新推荐文章于 2024-09-14 17:54:00 发布

老王爱学习0821

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量193

点赞数 2

分类专栏：前端文章标签： web html5

本文链接：https://blog.csdn.net/weixin_45846235/article/details/107191944

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML笔记整理

HTMl&CSS基础

博客类

<h1>...</h1>  <!.. 1级标题 -->
<h2>...</h2>  <!.. 2级标题 -->
<h3>...</h3>  <!.. 3级标题 -->
<h4>...</h4>  <!.. 4级标题 -->
<h5>...</h5>  <!.. 5级标题 -->
<h6>...</h6>  <!.. 6级标题 -->
------------------------------
<p>...</p>    <! -- 段落标签，文字会独占一行 -->
<i>...</i>    <! -- 文字会出现斜体效果 -->
<b>...</b>    <! -- 文字会出现加粗效果 -->
<br>          <! -- 换行标记 -->
<hr>          <! -- 水平线 -->
&nbsp         <! -- 网页上显示一个空格 -->

新闻类

<a href="http://www.baidu.com/">欢迎来到百度</a>  <! -- 超链接 -->
# 跳转到新的页面
<p>
	<a href="http://1000phone.com" target="_blank">点击打开千锋（新页面跳转）</a>
</p>
----------------------------------------------------------------
<img src="img/icom-mark_6324efc.png"/>          <! -- 图片   -->
<img title="提示" alt="失败" src="img/icom-mark_6324efc.png"/>  
---------------------------------------------------------------
<! -- 无序列表 -->
<ul>
    <li>
    	列表项目
    </li>
</ul>
---------------------------------------------------------------
<! -- 有序列表 -->
<ol>
    <li>
    	列表项目
    </li>
    
</ol>

知识补充

使用<del>...</del>        使文字增加删除线
使用<sup>2</sup>          把文字变成上标，10平方
使用<u>...</u>            给文字加下划线
使用<center>...</center>  把文字居中

百度网盘制作

绝对地址

在任何情况在，都可以找到的地址。

相对地址

而相对地址，必须知道当前所在，才能找到

简单表格制作

<table>
    <tr>
    	<td></td> <td></td> <td></td>
    </tr>
    <tr>
    	<td></td> <td></td> <td></td>
    </tr>
    ......
</table>
--------------------------------------
<table>...</table>   <! -- 表格 -->
<tr>...</tr>         <! -- 表示一行 -->
<td>...</td>         <! -- 表示单元格 -->
<col>                <! -- 代表一列 -->
--------------------------------------
border="1px"         <! -- 表示边框树形 -->
cellspacing="0"      <! -- 单元格空隙 -->
--------------------------------------
align="center"       <! --对齐方式 -->

个人简历制作

行合并  <td colspan="6"></td>
列合并 <td rowspan="4">照片</td>

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
		<col width="100px"> 
		<col width="100px"> 
		<col width="100px"> 
		<col width="100px"> 
		<col width="100px"> 
		<col width="100px"> 
		<col width="200px"> 
		
		
		<tr align="center" height="40px">
			<td colspan="7">个人简历</td>
			
			
		</tr>
		<tr  align="center"  height="40px">
			<td>姓名</td>
			<td></td>
			<td>性别</td>
			<td></td>
			<td>年龄</td>
			<td></td>
			<td rowspan="4">照片</td>
		</tr>
		<tr  align="center" height="40px">
			<td>学历</td>
			<td></td>
			<td>籍贯</td>
			<td colspan="3"></td>
			
		</tr>
		<tr  align="center" height="40px"> 
			<td>电话</td>
			<td></td>
			<td>政治面貌</td>
			<td colspan="3"></td>
			
		
		</tr>
		<tr  align="center" height="40px">
			<td>毕业院校</td>
			<td colspan="5"></td>
			
			
		</tr>
		<tr  align="center" height="40px">
			<td>求职意向</td>
			<td colspan="6"></td>
			<td></td>
			
		</tr>
		
		</table>
	</body>
</html>

表格知识补充

关于表头

<th>.....</th> 将th替换为td
th = 加粗并水平居中td
-------------------------
<col width="100px"> 
<col width="100px"> 
<col width="100px"> 
<col width="100px"> 
<col width="100px"> 
<col width="100px"> 
以上代码可以用colgroup标签替换
<colgroup span="6" width="100px"></colgroup>
---------------------------
<col width="200px"> 
<colgroup span="1" width="200px"></colgroup>

关于tbody标签

<table>
    <thead>
        表格的页眉
    </thead>
    
    <tboby>
    	表格的主体
    </tboby>
    
    <tfooter>
    	表格的页脚
    </tfooter>
</table>

关于标签的嵌套

超链接不能嵌套超链接

p标签不能嵌套p标签

标题标签h1…h6不能相互嵌套

登陆表单

<form action="http://www.miaodongketang.cn">
    
</form>

1.from必须有action属性，表示提交地址

2.所有需要提交的数据，input必须有name属性

3.input按钮的文字，使用value属性表示

4.input必须放在from标签内才能提交

input标签常见类型总结

文本输入框 type=“text”

输入框 type=“password”

单选框 type=“radio”

复选框 type=“checkbox”

普通按钮 type=“button”

提交按钮 type=“submit”

重置按钮 type=“reset”

文件选择框 type=“file”

get请求和post请求的区别

从从能上划分

提交数据post 获取数据get

1.get请求通常表示获取数据

2.post请求通常表示提示数据

3.get请求发送的数据都写在地址栏上，用户可见

4.post请求发送的数据用户不可见

heckbox"