当前位置： 移动技术网 > IT编程>网页制作>CSS > Html基础

Html基础

2018年04月13日  | 移动技术网IT编程  | 我要评论 
1·什么是 HTML？

 

 

    HTML： Hyper Text Markup Language ： 超文本标记语言

    超文本： 功能比普通文本更加强大

    标记语言： 使用一组标签对内容进行描述的语言， 它不是编程语言 

2· HTML 的语法和规范

    HTML 文件都是以.html 或者.htm 结尾的， 建议使用.html 结尾！
    Html 文件分为头部分<head></head>和体部分<body></body>。
    Html 标签都是由开始标签和结束标签组成(<hr />)。

    Html 标签忽略大小写， 建议使用小写。

3 HTML 入门

    3.1 HTML 文本标签

            a. 标题标签
                从<h1>到<h6>逐渐变小(加粗加黑显示)
            b. 水平线标签<hr/>
            c. 段落标签<p>

            d.字体标签
                <font 属性=值>内容</font>
                    color:设置字体的颜色， 可使用英文单词或者 16 进制
                    size：设置字体的大小， 从 1 到 7 逐渐变大，最大显示为 7
                    face：设置字体


               f.<img/>标签的 src 属性。
                    当前目录：直接写文件名称或者./文件名称
                    上一级目录： ../文件名称
                     下一级：目录名称/文件名称
                      width：设置图片的宽度
                      height： 设置图片的高度
                      alt： 当图片无法正常显示的时候给出的提示信息， 它的显示效果与浏览器有关

                g.列表标签：

                    有序列表： <ol type=”1” start=”4”><li></li></ol>

                h.无序列表： <ul type=”circle”><li></li></ul>

                i.超链接标签：
                    <a href=”http://www.baidu.com” target=”_self、 _blank”>百度</a>

                j. table表格标签：

  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的跨行跨列操作</title> </head> <body> <table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px"> <tr> <td colspan="2" align="center" width="250px" height="50px"> <img src="../../img/1.jpg" height="100%" width="100%"/> </td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td colspan="2" rowspan="2" align="center"> <table border="1px" align="center" width="100%" height="100%"> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table> </td> <td>24</td> </tr> <tr> <td>31</td> <td rowspan="2" align="center">34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> </tr> </table> </body> </html>

            k.框架子标签<frame>

                                    后台系统显示页面.html

<html>
	<head>
		<meta charset="UTF-8">
		<title>后台系统显示页面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
		</frameset>
	</frameset>
</html>

                                                     left.html                               

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">会员管理</a><br /><br />
		<a href="#">品牌管理</a><br /><br />
		<a href="#">商品管理</a><br /><br />
		<a href="#">分类管理</a>
	</body>
</html>

                                    right.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		所有用户信息
	</body>
</html>

                                        top.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font size="7">欢迎XXXX进入后台管理系统</font>
	</body>
</html>

                                        l.表单标签<form>


            method：表单提交的方式(get/post/delete……等 7 种)

  • 文本输入项
<input type=”text” name=”” size=”” maxlenght=”” readonly=””  placehoder=””/>

name: 提交到服务端必须指定的属性
size: 指定输入框的宽度
maxlenght: 指定输入内容的长度
readonly: 设置为只读
placehoder: 输入内容的提示信息

  • 密码输入项

<input type=”password” name=”” />

name: 提交到服务端必须指定的属性

  • 单选按钮

<input type=”radio” name=”” value=”” checked=””/>

value: 提交到服务端必须指定的属性

checked:默认选中,值为checked

  • 多选按钮

<input type=”checkbox” name=”” value=”” checked=”” />

  •  下拉列表

<select name=””>
    <option value=”” selected=””>北京</option>
    <option>上海</option>

</select>

value: 提交到服务端必须指定的属性

selected:默认选中,值为selected

  •  文件上传项

<input type=”file” name=””/>

  •  文本输入域

<textarea name=””></textarea>

  •  提交按钮

<input type=”submit” value=””/>

submit: 具备将整个表单提交到服务器的功能
value: 修改按钮上面的内容

  • 普通按钮

<input type=”button” value=””/>

  • 重置按钮

<input type=”reset” value=””/>

  •  隐藏项

<input type=”hidden” name=””/>
用于用户比较敏感的一些信息

  • Get 与 post 提交方式的区别？ 【默认提交方式为 get】

Get 提交方式，所有的内容显示在地址栏， 不够安全，长度有限制。
Post 提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网