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>
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
