HTML:超文本标记语言
超文本:比普通文本功能强大
标记语言:使用一组标签对内容进行描述的一门语言,它不是编程语言(不需要编译)
相关标签
标签基本都是由开始标签和结束标签组成(特殊<br />)
标题标签:<hn></hn>n是从1-6逐渐变小的,超过6的按6显示,
特点:加粗加黑显示,单独占一行,与其他行有行间距
注释标签:<!--标题标签--> 可以使用快捷键ctrl+/
换行标签:<br />
水平线标签:<hr />
段落标签 <p></p>
字体标签 <font></font>:里面有颜色属性和字体大小属性(从1-7逐渐变大,超过按7来表示),也可以设置字体 color(颜色) size(大小) face(字体)
<font color="green" size="1" face="楷体"> 哈哈</font>
<b></b> 加黑
<i></i> 加斜
图片标签:<img />
<img src="./img/wallhaven-211628.png" width="150" height="150px" alt="logo图片无法显示"/>
如果图片在同一级直接写名称,或者 ./name,如果是上一级的话 ../name
如果是下一级 目录名称/文件名称
可以设置width height alt(图片加载错误时提示的消息)
列表标签:
有序的列表:<ol></ol>
属性:type 5类 start 其实位置 reverse:排序
<ol start="4">
<li>sad</li>
<li>sadasd</li>
</ol>
//通过start来设置从哪开始向下增加
无序列表:<ul></ul>
属性:type 3个取值
<u1>
<li>Coffee</li>
<li>Milk</li>
</u1>
超链接标签:<a href="" target=""></a>
href属性来设置点击后跳转到哪个网页中
target属性来设置点击这个超链接后是保留原来网页还是覆盖原有的网页,_blank是保留原有网页,_self是覆盖原有网页,他还可以自己命名
表格标签:<table></table> 有border属性设置边框 align来设置位置 bgcolor设置颜色 cellspacing来设置单元格间的间距 cellpadding设置单元框内容的属性
注意,一写出table 就立刻写出<tr>,再写出<td>
<table>
<tr>
<td></td>
</tr>
</table>
<table>的属性:
边框:border
宽度:width
高度:height
背景色:bgcolor
边框与边框:cellspacing
边框与内容:cellpadding
居中显示 :align
表格中的<td>关于合并列 <td colspan="2"> 11 </td>他会自动将第一列与第二列合并 而且<td>也具有table中的属性,它也可以合并行操作<td rowspan="2"> 11 </td> <td>中的属性 colspan是横着合并,rowspan是竖着合并,可以使用colspan后再使用rowspan,结合使用,会形成多行多列的合并
例如
<!DOCTYPE html>
<html lang="en">
<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"> 11 </td>
<td> 13 </td>
<td> 14 </td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">22</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
单元格中可以嵌套文字 图片 超链接
添加空格使用
<a href="#"> <font color="white" size="5">首页</font></a>
这样可以在后边添加四个空格,而且此处还需要注意,我们在这里将超链接放到了字体设置外面而没有放在字体设置里面,这是因为使用超链接会使字体变为蓝色,如果将超链接放在里面,我们所设置的字体颜色将失效(他会变成蓝色),所以我们要放在里面
框架结构标签:<frameset>
此标签的作用是将页面进行区域的划分
属性:cols:进行垂直切割划分,切割为任意块(参数相加为100%)
rows:进行垂直切割划分,切割为任意块(参数相加为100%)
后台系统,使用他时就将<body></body>删去
<frameset cols="25%,*">
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>
划分区域后,用<frame></frame>来进行内容的填充
属性:src:指定该区域显示的文件
name:通常结合超链接target属性来使用
表单标签:<form></form>
属性:action表单的提交位置
methed表单的提交方式(get/post 7种方式)
输入标签:<input />
属性:type 可以设置输入方式,文本框或者密码框
name 给这个键命名,可用于将多个框组合起来
maxlenth文本框中输入的最大最大限制
placeholder 框的输入时的背景提示
readonly 只读
required 规定文本区域必须填
用户名:<input type="text" name="username" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
要想将选择的属性提交到后台,就必须给每个<input>设置value值,在网页反应时会向后台反馈所选择的值
制作选择框:eg:
籍 贯: <select name="province">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><br />
在这里设置默认初始选择使用的属性为selected="selected"
制作单选框并且默认选择一个值:
属性checked="checked";
性 别:<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />
这是一个注册表单的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" METHOD="get">
隐藏字段:<input type="hidden" name="id"/><br />
用户名:<input type="text" name="username" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
密 码:<input type="password" name="password" required="required"/><br />
确认密码:<input type="password" name="repassword"/><br />
性 别:<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />
爱 好:<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码"/>写代码<br />
头 像:<input type="file" name="file"/><br />
籍 贯: <select name="province">
<option>请选择</option>
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br />
提交按钮<input type="submit" value="注册"/>
重置按钮<input type="reset">
</form>
</body>
</html>