html知识点
程序员文章站
2024-03-04 09:37:35
...
html
目录
基本框架
<html>
<head>
<meta charset="utf-8" /> <!--声明编码格式为utf-8格式-->
<title>网页标题</title>
</head>
<body>
网页的内容
</body>
</html>文本标签
<h1>标题</h1> <!--标题样式默认放大、换行-->
<h2>标题2</h2> <!--从h1到h7从大到小排列-->
<hr /> <!--分割线-->
<p>段落标签</p> <!--上下有段落间距，前后换行-->
<blockquote>带缩进的段落</blockquote> <!--blockquote内所有行都会缩进-->
123<br /> 133<br /> <!--段内换行上下不加间距-->
x<sup>2</sup> <!--上标签-->
x<sub>2</sub> <!--下标签-->
<pre>
1234
原样输出标签
</pre>
<strong>实例1</strong><br /> <!--加粗标签-->
<em>实例2</em><br /> <!--斜体标签-->
<center>文本01</center> <!--居中标签-->
<font size="4" face="微软雅黑" color="#0f0">文本</font> <br />
<!--font标签的属性：size定义文字大小最高到
face定义文字字体
color定义文字颜色-->
<p>转义字符</p>
文本 文本 <!--空格-->
<<br /><!-- < -->
><br /><!-- > -->
注册商标R标签®<br />
版权所有C标签©
结果如下
html文本样式css样式也可以实现并且更灵活便于维护。
超链接标签
<a href="连接到的地址或资源文件" target="_self">超链接</a>
<!--harf内可以使用的协议：
file:// 本地文件
http://自己的执行流程 :通过查看hosts文件中有没有该域名对应的ip,有的话,调用程序访问,如果没有,就联网操作访问
thunder://迅雷协议
mailto:邮件协议
target: _self:在当前窗口直接开
_blank:新建一个窗口打开-->
a标签还可以用来做跳转
<a name="cat"></a> <!--打锚点，name中定义一个锚点名称-->
<a href="#cat">返回</a>
<!--点击的时候页面会跳转到锚点位置
也可以用在不同页面链接到锚点时候href内先写链接到的页面的地址在加#锚点名-->图像标签
<img src="img/1.jpg"/>
<!--src:链接到的资源图片
width:宽度可以为px或者%
height:高度
title:悬停状态鼠标处显示的文字
alt:当图片失效时显示的内容-->表格
可以用于网页布局但是不好控制并且需要全部加载后才可以显示，现在已经弃用。
<table border="1px" width="100px" height="100px">
<!--border:边框
cellpadding：单元格内边距
cellspacing：单元格之间的边距
align:表格对于窗口的对其方式
属性值:left center right
width:表格的宽度
height:表格的高度
bgColor:背景色-->
<caption>表头，位于表格上方</caption>
<tr><!--行标签-->
<th colspan="2" ><!--居中加粗的单元格-->
<!--colspan横向合并-->
Header
</th>
</tr>
<tr>
<td rowspan="2"><!--单元格标签-->
<!--rowspan纵向合并-->
Data
</td>
<td>Data</td>
</tr>
<tr><td align="center">Data</td></tr>
<!--align:对其方式-->
</table>输出如下：
表单标签
用于采集用户输入的数据
<form action="#" method="post" onsubmit="">
<!--创建一个表单域
action设置提交的地址
method设置提交的方式有get和post两种
get不安全信息会显示在地址栏，并且有大小限制
post信息不会显示在地址栏且没有大小限制
onsubmit返回提交的结果
true:表示提交成功
false:表示提交失败-->
<input type="text" name="use" value="默认" />
<!--文本框
name属性必填用于给后台做标记
value定义默认显示的内容
placeholder属性：定义提示内容以灰色字显示，有输入内容时消失
-->
<input type="password" name="pwd" value="123" />
<!--密码框:用小点显示-->
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<!--单选框:name设置为相同才可以单选-->
<input type="checkbox" name="nn" value="1" />1
<input type="checkbox" name="nn" value="2" />2
<!--复选框:name属性设置为相同-->
<input type="hidden" name="h1" />
<!--隐藏域:没有显示但是可以携带数据-->
<input type="file" name="h3" />
<!--选择文件上传-->
<textarea name="text" rows="5" cols="20">。。。。</textarea>
<!--文本域
rows:文本域中有多少行
cols:一行能写多少个字符-->
<select name="h4">
<option selected="selected" value="请选择">请选择</option>
<!-- selected="selected" 预先选定的-->
<option value="第一个">第一个</option>
</select>
<!--下拉列表-->
<input type="button" value="按钮"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
</form>输出效果：
表单标签均要设置name属性用于给后台标记
| text | 文本域，设置rows（文本行数）cols（行字符数）后变为一个输入区域 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 复选框 |
| hidden | 隐藏域，不会显示可以携带信息 |
| file | 上传文件按钮，会显示所选文件的名字 |
| button | 一个按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
下一篇： git还原文件权限