前端---HTML基础

HTML:Hyper Type Marker Language（超文本标记语言），可以对字体，视频音频等进行渲染；但是结构不严谨，标签可以不成对出现，浏览器解析文件时会自动补全。
XML：可扩展标记语言，结构严谨，标签必须成对出现，标签可以自定义。（JavaEE核心基础中的一种）
HTML是网页内容的载体，CSS样式是表现，JavaScript是用来实现网页上的特效效果

HTML

HTML文件结构

<html>    
<head>...</head>    
<body>...</body>
 </html>

转义字符

转义字符：

版权所有：&copy
注册商标：&reg
2个空格：&nbsp
左尖括号：&lt
右尖括号：&gt

HTML文本标签与注释

注释：
标题标签(h1–h6)：<h1>标题</h1>
段落标签：<p></p>
段落缩进：<blockquote></blockquote>是一种小引用
滚动标签：<marquee></marquee>

设置滚动方式,来回滚动：<marquee behavour="alternative"></marquee>
设置滚动方式：滚动一次：<marquee behavour="slide"></marquee>
设置滚动方向：<marquee direction="up"></marquee>
设置滚动区域背景颜色：<marquee bgcolor="pink"></marquee>

文本原样输出标签：<pre></pre>
水平线（空标签）：<hr/>
上标标签：<sup></sup>
下标标签：<sub></sub>
换行标签(空标签)：<br/>
居中标签：<center></center>
块内标签：<div></div> 在浏览器中占一整行，会自动换行
行内标签（用在块内标签中）：<span></span>

列表标签：

有序列表(默认列表是实心圆点，在ul标签中使用type属性设置列表项类型：type=“circle” ：空心圆点；type="square"菱形 )：
```
 <ul>
  <li>XXX</li>
  <li>XXX</li>
  </ul>
```
无序列表(默认数字123，设置属性可以为type=“A”)
```
<ol typr="A">
   <dt>XXX</dt>
   <dt>XXX</dt>
  </ol>
```

超链接标签：

默认在当前页面直接打开：<a herf="链接地址">XXX</a>
在新建窗口打开：<a herf="链接地址" target="-blank">XXX</a>
超链接的两个作用：
1.链接资源文件/地址
2.作为锚链接使用（同一页面中）步骤：
- 1）打锚点（做一个跳转目的地标记）<a name="foot"></a>
- 2）创建跳转链接<a herf=#锚点名称></a>/在不同页面中：<a herf=资源链接地址#锚点名称></a>

常见协议：
file:// 本地文件协议
http://
mailto:邮件协议
thunder:迅雷协议
http://执行流程：
链接地址（url）就是域名，通过DNS域名解析系统得到IP地址，这个IP地址是与域名绑定的，通过运行商对目的ip服务器请求响应，获得需要的内容。
在实际url域名请求时，系统首先会找系统中的hosts文件，如果是本地文件，则对应的ip是本地回环ip
如果在本地找不到域名对应的IP，就会调用网卡进行联网操作，访问网络运用商，通过网络运营商（如移动运营商）间接向目标服务器（如百度服务器（一般是服务器集群））发起请求

图像标签:<img src=“”></img>

图片的高度和宽度属性(单位为像素)：height=“500px”/width="200px"
图片链接失效时图片的替换文本解释说明图片的文字属性：alt="XXX"
鼠标悬浮图片时的文字描述属性：title="XXX"
为图片标签赋ID值：id="img1"

url/uri：uri中包含了各种网络协议，url是uri的子集

表格标签：html中没有列的概念，列是通过一个单元格td来表现
表格标签：<table></table>

边框：border：Xpx
背景色：bgcolor
宽度和高度：width/height
对齐方式：align
设置单元格边沿和边框线之间的空间：cellspacing
设置单元格和内容之间的空间:cellpading

行标签：<tr></tr>

对齐方式：align

单元格：<td></td>

合并行：rowspan
合并列：colspan

表头：<th></th> 自动加粗居中
表格中的标题：<caption></caption>
表格效果的呈现：table标签中包含tr标签，tr标签中包含td标签

表格标签默认拆分：
thead 头
tbody 体
tfoot 脚
因为浏览器解析引擎解析html文件时遇到table标签，会将table标签中的每一行的内容用tbody包含起来，让用户体验更好
如果不进行拆分，就会将table的整个标签加载完毕之后才能去访问里面的内容，用户体验差，开发者在表格中添加上面三个标签不会影响效果展示，将表格拆分后，每一小部分加载完毕后就可以进行访问
后期会通过表格的拆分完成一个特定的功能：CSS选择器—伪类选择器（表格中的行，经过鼠标选择后就变成其他的颜色）

输入标签：<input></input>

单选按钮：type=“radio” value=“XXX”
复选框：type=“checkbox” value=“XXX”
隐藏域：type=“hidden” 隐藏携带数据
提交：type=“submit” value=“XXX”
重置：type=“reset” value=“XXX”（情况input标签中的内容）
普通按钮：type=“button” value=“XXX”
name属性是一个标记,若是要将当前内容提交到后台，是后台需要的具体内容，则name是必填项:name=“XX”
禁用输入框的输入功能：disabled=“disabled”

事件编程三要素：
1.事件源：input标签
2.编写事件监听器：在<script></script>标签中编写函数
3.注册事件监听器

下拉菜单功能：

<select >
<option value="XXX">xxx</option>
<option value="XXX">xxx</option>
</select >
- multiple属性：多选

文本域标签：<textarea></textarea>

设置文本的行数：rows
设置文本的一行的字符数:cols

表单标签：可以用于登陆或注册

<form action="后台服务器地址：url链接" method="提交方式：get/post">
<input type="text" id=“username” name="name"></input>
<input type="submit" value="注册"></input>
</form>

action：提交的url地址，一般是后台地址
method：提交方式，常用：get（在地址栏明文显示为http://localhost/xxx.htmlusername=XXX&password=XXXX，不安全，提交的数据大小有限，不超过4kb）/post（不在地址栏显示，在请求协议中以键值对的形式明文显示显示，提交数据大小无限制）
onsubmit事件：当前表单提交是否成功：返回值为true表示提交成功，否则失败
给表单标签提供默认值 placeholder
表单标签中使用input标签组成完整的表

密码加密：MD5/SpringSecurity

框架标签

一个frame即框架标签中包含一个html页面，当包含多个html页面的时候，不能称之为frame,而是frameset即框架集，frameset标签不能和body共存
框架集标签:

横向划分，当前分割成几个html页面占的权重百分比：rows=“n%,n%,…”
竖向划分，当前分割的几个frame，所占的权重百分比：cols=“n%,*”，（*代表剩余空间）

框架标签：<frame/>(空标签)

链接html页面：src=“XXX.html”
链接所需要的超链接位置，name属性值需要和超链接标签的target属性值一致

HTML

HTML文件结构

转义字符

HTML文本标签与注释

框架标签

猜你喜欢