跳至主要內容

Html

HeChuangJun约 1364 字大约 5 分钟

Html

1. Html介绍

  • 超文本标记语言（HyperText Markup Language）不是编程语言
  • 超文本指页面可以包含图片、链接等非文字内容，比普通文本更强大
  • 标记就是使用标签的方法将需要的内容包起来。使用一组标签对内容进行描述的语言
  • 标签不区分大小写，建议小写，扩展名html或htm
  • HTML：它是整个网站的骨架。
  • CSS：它是对整个网站骨架的内容进行美化(修饰)
  • Javascript：它能够让整个页面具有动态效果。

2. Html文档结构

<!DOCTYPE html><!--html5的头,比html4.01的文件头简洁-->
<html><!--根标签，由头和体组成-->
<head><!--头标签，用于引入脚本、导入样式、提供元信息等，浏览器端不显示-->
	<meta charset="UTF-8"><!--设置html页面编码-->
	<title>显示浏览器标题</title>
</head>
	<body>体标签，网页主体</body>
</html>

3. Html语法

注释:<!--注释内容-->  快捷键ctrl+/，源码可见，不能嵌套

超链接：<a href="目标地址url" target="_blank(新开)/_self(替换)/frame的name属性" title="提示文本">超链接</a>

<b>粗体</b>

<br/>插入单个换行

<div>11</div>

<!--frameset（了解） -->
<!--多个窗口页面整合在一起的一个集合（框架集），每个页面都是单独文档，-->
<!--需要用子标签<frame>来确定页面的位置。多个frameset可以嵌套使用，frameset和body不能共存-->
<a href="right.html" target="right"></a>
<frameset rows="20%,*/？px，*(表示上边占？%/？像素，下边100-？%)">
	<frameset cols="20%,*/？px，*(左边占20%/？像素，右边占80%)">
	<frame src="url用于指向html页面" nonresize=”true”noresize框架分割线不能移动/>
	<frame name="right(frame中的name 属性必须是超链接的的target属性值)" />
</frameset>

<!--表单标签（重要）
action属性，请求路径，确定表单提交到服务器的地址（路径）
method属性，请求方式，默认get，提交的数据追加在请求路径上。不安全。
如/1.html?username=jack&password=1234.数据格式k/v，追加使用？拦截，
之后每一对数据使用&连接，url限制提交长度
post属性值，提交的数据不在请求路径上，不显示在地址栏上，安全，长度无限制
表单标签，无显示，要提交的数据必须放在表单标签内-->
<form action="#/${pageContext.request.contextPath}/虚拟路径" method="get/post" entype=”multipart/form-data(包含上传控件) name="regist"“”>
	输入框:
	<input type="text" disabled name="a" readonly="readonly(只读)" value="a" maxlength="5"  placeholder="用户提示" />
	<input type="password" name="password" required="required（必填）"/>
	单选按钮
	<input type="radio" name="sex" value="男"/>男
	<input type="radio" name="sex" value="女" checked="checked（默选）"/>女
	复选按钮
	<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
	<input type="checkbox" name="hobby" value="a" checked="checked"/>a
	提交按钮：<input type="submit" value="注册（显示文本）"/>
	普通按钮：<input type="button" value="zhuce"/>
	重置按钮：（将表单恢复到默认值）<input type="reset" />
	<!--图形提交按钮通过src给按钮设置图片image-->
	隐藏字段:<input type="hidden" name="id" value="（暗中传输一些参数）" />
	上传文件<input type="file(上传)" name="file"/>
	<!--name属性（必写）服务器通过name属性值获得表单提交的数据、见闻起义
	value属性:设置input默认值,submit和reset为按钮显示数据,发给服务器的值-->
	下拉框：
	<select name="province" multiple=”multiple（多选）”size=“3（可见选项数）”>
	<option>--请选择--</option>
	<option value="北京">北京</option>
	<option value="上海" selected="selected（默认勾选）">上海</option>
	</select>
	文本域：
	<textarea name="zwjs" cos=”?（列数）” rows=”?（行数）”></textarea>
</form>

<font size="7"(1-7，默认3，大于7的按7显示)color="#FF0000(blue)" face=“楷体”></font>

<h2>标题标签hn 1-6，n越大，字体越小，大于6则按6算</h2>加粗加黑显示，单独占用一行，与其他行有一定的间距

<hr size=”5”（水平线的高度，单位像素） noshade=”noshade(水平线标签:noshade表示没阴影、纯色)”/>

<i>斜体</i>

<img src="图片路径url/#（不跳转）"  width="？px/？%" height="？px" alt="加载失败信息"/>
<!--width和height设置百分数用于填充满整个表格或该像素
src:指的是图片显示的路径(位置)
绝对路径：E:\Users\Desktop\WEB01_HTML\资料\WEB01\image
相对路径：
①同一级：直接写文件名称或者./文件名称
②上一级：../文件名称③下一级：目录名称/文件名称-->

<ol start="4" reversed="reversed(有序列表降序排列)" type="a/A/i/I/1">
	<li>CSDN</li>
	<li>百度</li>
</ol>

<p title="I'm a tooltip">段落标签，自动在其前后创建一些空白 title将鼠标悬停在元素上时，title 属性的值将显示为工具提示</p>

table(加载太慢，了解)
方式1
<table align="center/right/center" border="2px" cellspacing="0px" cellpadding="0px" align="center"
	width="500px" height="400px" bgcolor="blue">			
	<tr>
		<td colspan="2">2</td>//列
		<td rowspan="2">3</td>
	</tr>
	<tr>
		<td >4</td>
		<td >5</td>
	</tr>
</table>	
方式2
tbodies，所有的tbody，tbodies[i]，表示第几个tbody，rows多少行，rows[i],第几行。length，长度
<table border="1px" width="500px" height="50px" align="center" id="tbl">
	<thead>
		<tr>
		<th>编号</th>//表头，该内容默认居中、加粗
		<th>姓名</th>
		<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr >
		<td>1</td>
		<td>张三</td>
		<td>22</td>
		</tr>
		<tr >
		<td>2</td>
		<td>李四</td>
		<td>25</td>
		</tr>
	</tbody>
</table>

<ul type="square/circle/disc(无序列表方块/空心圆/实心圆)">
	<li>CSDN</li>
	<li>百度</li>
</ul>

&nbsp；&lt;