HTML基础知识总结

Posted 2021-07-20 汤米先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础知识总结相关的知识，希望对你有一定的参考价值。

html基础知识简要概括

介绍

学习了HTML基础，总结了一些简要的标签的用法和知识点，下面就分享给大家吧！

HTML编写格式

下面是HTML编写的必要部分

<!---->是注释内容
<html> 
<head>
<title><!-- 标题 --></title>
</head>
<body>
<!-- 内容 -->
</body>
</html>

HTML 基本标签

 
    1. 分段标签 ：<p> ****</p>
       
    2. 注释标签 ：<!--****-->
   
    3. 标题标签 ：一级标题：<h1>***</h1>,二级标题：<h2>***</h2>
   
    4. 换行标签 ：***<br>*** ,比较特殊，是独目标签
   
    5. 横线标签 ：<hr>,独目标签
   
    6. 属性标签 ： <hr color ="red"  width ="50%">	,例如此属性为<hr>的属性标签，表示横线的颜色和宽度（居中）
    
    7. 预留格式 ： <pre>****</pre>,编辑的时候什么格式，在网页上也展示什么格式
 
    8. 删除字 ： <del>***</del>,在内容上画一横线
  
    9. 插入字 ：<ins>***</ins>,在内容下面画线

   10. 粗体字 ： <b>***</b> 
  
   11. 斜体字 ： <i>*** </i> 。
   
   13. 字体标签 ： <font  color="red"	 size="50">****</font>,可为字体设置属性。

HTML表格

 1. 表格标签 ： <table>***</table>
 
 2. 表格的行： <tr>***</tr> 

 3. 表格行中的格： <td>***<\\td>
 
 4. 表格的属性标签 ： <table border=" 1px"  width=“60%”  height ="150px">, px为像素，可用像素或百分比来控制大小

 5. 表格对齐方式 ： <tr align ="center">*****</tr>,表示本行中的内容居中显示

 6. 单元格的合并 ： 上下2个合并 <td rowspan="2">*</td>，左右2个合并 <td colspan="2">*</td>

 7. 列表名称标签 ： <th>***</th>,与<td>*</td>用法相同，但形式上多了“加粗，居中”的属性

例如制作一个HTML表格，为3*3，内容是1-9,居中显示，表格属性为4中属性：

<html>
	<head>
		<title>HTML表格</title>
	</head>
	<body>
		<table border="1px"  width="60%"  height ="150px">
			<tr align="center">
				<td> 1</td>	
				<td> 2</td>
				<td> 3</td>
			</tr>
			<tr align="center">
				<td> 4</td>	
				<td> 5</td>
				<td> 6</td>
			</tr>
			<tr align="center">
				<td> 7</td>	
				<td> 8</td>
				<td> 9</td>
			</tr>
		</table>
	</body>
</html>

HTML设计

 1. 背景色,背景图片 ： <body bgcolor="red" background="图片的地址/名称"> ***</body>

 2. 设置图片标签 ：<body> <img src="图片地址" width="修改的图片宽度" height="宽度" title="鼠标悬停在图片上时的提示" alt="对应路径找不到图片时的提示"></body>

 3. 若双目标签的中间没有内容时，可以不写结束标签，开始标签的后面加‘/’，例如<body></body>与<body/>意义相同
 
 4. 超链接 : <body> <a href="网址或者是本机文件的地址" >“文字”或“<img src="图片的地址"/>” </a></body>
 
 5. 超链接属性 ： <a href ="网址" target ="**">, target内可取值 **_blank: 新窗口 ，_self:当前窗口**， _top: 顶级窗口	，_parent:父窗口
  
 6. 列表 ： 有序<body type ="1"> <ol> <li>***<\\li> <li>***</li> </ol>  </body>  无序 <body> <ul> <li>***<li><li>***</li></ul></body>,type属性可选项有序列表的排列符号

HTML表单

 1. 表单可以收集发送数据

 2. 用from标签画表单，一个网页可以有多个表单
 
 3. from中的action属性可以用来发送数据到指定的服务器地址中，并且对服务器地址发送请求，转到该服务器地址中（这点与超链接一样）。

 4. action具有method属性，有get和post两个可选项，为两种提交方式，若不写这个属性，默认会选用get提交方式，get方式提交时会显示提交的数据格式，而post不会显示（比较隐私一点），但是提交的原理都是相同的，name=value&......

 5. type中可选项submit和button虽然都是按钮，但是意义不同，只有submit具有提交数据的功能。type中的其他可选项均代表不同功能的组件。 value属性是各个控件的内容。

 6. type选用text属性的时候，必须用name对其进行命名，否者不会提交text中的数据。而text中的内容被默认为value属性，作为提交给服务器的对象。对于type中的可选项submit，在被点击时没有发送自己的value值，原因就是没有对自己添加name属性

 7. type中可选项file控件可以上传本地的文件

 8. type中可选项hidden控件（隐藏域），<input type="hidden" name="00" value="000"/> ,网页上看不到，但是表单提交时，会一并提交给服务器
 
 9. 下拉列表 ： <select name=" "> <option value="gz">高中</option> <>  <option value="dx">大学</option> <>  <option value="yjs">研究生</option> </select>	
  
 10. readonly 和 disabled ： 用法 <input type="text" name="usercode" value="110" readonly /> ,<input type="text" name="usercode" value="110" readonly />，readonly与disabled的相同点：都是只读不能修改。但readonly可以将数据提交给服务器，disabled数据不会提交（及时有name属性也不会提交）
 
 11. maxlength ： 设置文本框中可输入的字符数量。用法：<input type="text" maxlength="3"/> 设置输入字符数量为3
 
 12. div和span： div和span都可以称为图层，可以保证网页灵巧的布局 。区别： div默认情况下独占一行，span不会独占一行

 13. id ： 每一个节点都有id属性，id都是独一无二的不可重复，id的存在让我们获取节点元素更方便

例1：点击按钮进入百度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度</title>
</head>
<body>
<form action="http://www.baidu.com">
     <intput type="text" name="username"/>
	<input type="submit" value="百度"/>
</form>	
</body>
</html>

例2： div和span

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="div1">我是div1</div>
	<div id="div2">我是div2</div>
	<span id="span1">我是span1
		<span id="span2"> 我是span2</span>
	</span>
	<!-- <span id="span2"> 我是span2</span> -->

</body>
</html>

以上是关于HTML基础知识总结的主要内容，如果未能解决你的问题，请参考以下文章