欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Html基础

程序员文章站 2022-04-29 12:22:34
...
什么是 HTML 


    HTMLHyper 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>

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>

Html基础

            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 提交方式,所有的内容不会显示在地址栏,比较安全,长度没有限制。













相关标签: html基础