HTML初学总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML初学总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6846字，纯文字阅读大概需要10分钟。
内容图文
文章目录
HTML头部
<!DOCTYPE html> <!--声明-->
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html"> <!--表示中文-->
<head> <!--头部标签 三部分内容：title css js代码-->
<meta charset="UTF-8"> <!--字符编码集-->
<title>HTML学习一</title>
</head>
常用的标签
font字体标签
<!--1.font标签测试
size:1--7
可以修改文本字体，颜色，大小
-->
<font color="red" face="宋体" size="10" onclick="alert('圆圆')">我是字体标签</font>
常用的特殊字符
<!--
2.常用的特殊字符
< <
> >
空格
-->
我是<br>标签<br/>
圆 圆 圈圈圆 圆
<!--只要是连续的，默认只有一个,加空格的转义字符才能空很远-->
h1标题标签
<hr/> <!--水平线-->
<!--3.标题标签 只有1-6
align 对齐属性 left center right
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<hr/> <!--水平线-->
a超链接标签
<!--4.超链接
href 设置连接的地址
target 设置哪个目标进行跳转
-self 当前页面
-blank 打开新页面来跳转
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<hr/> <!--水平线-->
ol列表标签
<!--5.列表标签
无序列表 ul type="none"
有序列表 ol 比无序列表多了前面的序号
-->
<!--需求：使用无序列表 把东北，赵四，小沈阳，宋小宝展示出来-->
<ol type="1">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ol>
<hr/> <!--水平线-->
img图片标签
<!--6.img标签测试
图片标签，src显示图片路径
border 边框像素 一般是1
width height 长宽
alt 找不到图片输出的文字
路径分为相对路径，绝对路径
相对路径：
. 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于 ./文件名 可以省略
绝对路径：
正确格式： http://ip:port/工程名/资源路径
错误格式： 盘符：/目录
-->
<!--需求：使用img标签显示一张美女的照片，修改宽高，边框属性-->
<img src="../../imgs/cloud.JPG" width="200" height="100" border="20"/>
<img src="./imgs/1.JPG" width="200" height="100" border="20" alt="找不到图片"/>
table表格标签
<!--
7.表格标签
table 内的align是设置表格的位置
tr 行标签 行
th 是表头标签
td 是单元格标签 列 有alient属性
b 是加粗标签
cellspacing 变大格子之间的间距
-->
<!--需求1：做一个带表头的，三行三列的表格，并显示边框-->
<table border="1" width="300" height="300">
<tr>
<td align="center"><b>1.1</b></td>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<!--需求2：表格对齐方式 cellspacing 变大格子之间的间距 colspan 属性设置跨列变成2-->
<table align="center" border="1" width="300" height="300" cellspacing="10">
<tr>
<td align="center" colspan="2"><b>1.1</b></td> <!--跨列的属性-->
<th>1.3</th>
</tr>
<tr>
<td rowspan="2">2.1</td> <!--跨行的设置-->
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
iframe标签
<!--8.iframe标签
可以在页面上开辟一个小区域，显示一个单独页面
iframe和a标签组合使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值
-->
我是一个单独的区域<br/><br/>
<iframe src="Hello2.html" name="abc" width="50" height="50"></iframe>
<br/>
<br/>
<ul>
<li><a href="Hello.html" target="abc">标签语法.html</a></li>
<li><a href="Hello2.html" target="abc">标签语法2.html</a></li>
</ul>
*form表单标签
什么是表单：html页面中用来手机用户信息的所有元素集合，然后把这些信息发送给服务器。
type:
text 是文本输入框 values 设置默认显示内容
password 是密码框
radio 是单选框 name属性可以进行分组实现单选按钮 checked表默认选中
checkbox 是复选框 checked可以默认选中
reset 是重置按钮
sumbit 是提交按钮
file 是上传文件
hidden 是隐藏域 当我们要发送某些信息，不需要用户参与，可以使用隐藏域（提交的时候同时发给服务器）给程序用的。
select 是下拉列表框
textarea 是多行输入框，rows显示几行的高度 cols是每行的显示字符宽度
提交：
action 属性设置提交的服务器地址
method 属性设置提交的方式是get或post
表单提交的时候，数据没有发送给服务器的三种情况
1.表单项没有name属性值
2.单选，复选都需要添加values属性，不然只有on，无法识别
3.表单项不在提交的form标签中
提交的方式两种：GET POST
GET:
1.浏览器地址栏的地址是：action属性+？+请求参数（name+values)
2.不安全，密码一清二楚
3.有数据长度的限制，超过100个字符，必须用post
POST：
1.浏览器地址栏的地址只有action属性值
2.相对安全，属性值看不到
3.理论上长度无限制
<form action="http://www.baidu.com" method="post">
<input type="hidden" name="action" value="login">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td><input type="text" name="username" value="请输入用户名"/> </td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" name="password" value="abc" /> </td>
</tr>
<tr>
<td> 确认密码：</td>
<td><input type="password" value="abc"/> </td>
</tr>
<tr>
<td> 性别：</td>
<td><input type="radio" name="sex" checked="checked" value="boy"/>男
<input type="radio" name="sex" value="girl"/> 女</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td><input type="checkbox" name="hobby"/> Java <input type="checkbox" /> C++</td>
</tr>
<tr>
<td> 国籍：</td>
<td><select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">--中国--</option>
<option value="usa">--美国--</option>
<option value="jp">--日本--</option>
</select></td>
</tr>
<tr>
<td> 自我评价：</td>
<td><textarea rows="10" name="desc" cols="20" ></textarea>
</tr>
<td align="right">
<input type="reset" />
</td>
<td align="right">
<input type="submit" />
</td>
</table>
</form>
其他标签
<!--需求1：div,span,p标签的演示
div标签 默认独占一行
span标签 长度是数据的长度
p标签 段落标签，默认在段落的上方或下方各空出一行
-->
<div>div标签</div>
<div>div标签</div>
<span>span标签1</span>
<p>段落标签</p>
CSS
css结合html方法
1.style="border...." 复杂，可读性差，没有复用性
<div style="color: blue">div标签</div>
2.在head中加入 xxx{
Key:value value;
} 只能在一个页面中复用，维护性差
<!--style标签专门写css代码-->
<style type="text/css">
div { /*所有div标签都可以*/
border: 1px solid red; /*边框 实线*/
color: blue; /*字体颜色*/
font-size: 30px; /*字体大小*/
}
span { /*所有span标签都可以*/
border: 5px dashed blue; /*虚线*/
color: yellow; /*字体颜色*/
font-size: 30px; /*字体大小*/
}
</style>
3.把css样式写成一个单独的css文件。通过link标签引入即可
<!--专门用来引入css代码文件-->
<link rel="stylesheet" type="text/css" href="../CSS/1.css">
id选择器
<style type="text/css">
#id001{
color: burlywood;
font-size: 30px;
border: 1px solid yellow;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
<!--id选择器：
看到是#打头的，就在标签内加入id的样式，然后对应样式的选择器名即可使用对应的属性
-->
<div id="id001">div标签</div>
<div id="id002">div标签</div>
class选择器
.class01{
color: burlywood;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
<!--class类型选择器:
.class是选择器名，在标签中加入class样式，对应选择器的名字即可使用对应的属性
-->
<span class="class01">span标签1</span>
<p class="class02">段落标签</p>
内容总结
以上是互联网集市为您收集整理的HTML初学总结全部内容，希望文章能够帮你解决HTML初学总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】