1. html
- html超文本标记语言
超文本
文本(字符，可以通过文本编辑器打开)
x.txt
Hello.java
index.js
超级文本
字节
视频，音频，图像，画布…
标记语言
<h2>hello world</h2>
表示hello world是一个二级标题
<p>hello world</p>
表示hello world是一个段落
- 第一个html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style></style>
<script></script>
</head>
<body>
<p>hello world</p>
</body>
</html>
<!DOCTYPE html> 表示当前的html版本为H5
head 标签内的内容不会被显示到浏览器视口中
<meta charset="UTF-8"> 当前文本的编码方式为utf-8
容错性比较强
<student>
<id></id>
<name></name>
</student>
2.html5
-
元素
单标签元素
<meta>
<br>
<input type="text">
成对标签元素(元素-dom对象)
开始标签 内容 结束标签
<table>
<tbody>
<tr>
<td>hello world</td>
</tr>
</tbody>
</table>
元素的属性
属性应该设置在开始标签内，标签名后，属性名和属性值之间通过'='分割，
属性与属性之间通过空格进行分割。属性名大小写不区分，属性值可以使用双引号、
单引号、没有引号。建议使用双引号括起来
1. 核心属性（绝大数标签都具有的属性）
id
class
title
style
2. 特有属性
<img src="" alt="">
<video src=""></video>
3. 扩展属性
<li data-url="/user"></li>
<div id="one" class="first">
hello world
</div>
<div ID='two' class=first>
hello world
</div>
注释
<!--
这个是注释
-->
-
块级元素
- 独占一行空间，默认宽度为父元素的100%
- 高度由内容决定，默认高度为0
- 可以为其指定宽度和高度
body
div 无意义的块级元素
h1~h6 标题
p 段落
ul 无序列表
ul>li li列表项，li可以添加任意标签
ol 有序列表
ol>li
dl 定义列表
dl>dt 标题
>dd 列表项 -
行内元素
- b/s架构
b 浏览器，安装在客户端
s 服务器（服务器软件 apache）安装在服务端
部署 - html
超文本标记语言 - 主体结构
- b/s架构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style></style>
<link rel="stylesheet" href="">
<script></script>
</head>
<body>
</body>
</html>
- 元素
1. 单标签元素
<input type="">
-
双标签元素
开始标签 内容 结束标签
<div 属性名=属性值 属性名=属性值>
内容…
-
核心属性
id class title style -
特有属性
src <img src="" alt="">
href <a href=""></a>
扩展属性
data-*
- 块级元素
1. 独占一行空间，宽度占满父元素
2. 高度由内容决定
3. 可以指定宽高
默认样式
body margin
div 无意义
h1~h6 margin,font-*
p margin
ul margin,padding-left
li
ol margin,padding-left
li
dl margin
dt padding
dd
H5新增块级元素(语义化标签)
除了具有语义之外，其余特性与div一致
header 页面头部
footer 页面脚部
article 主体
section 部分
aside 次部分
nav 导航
address 地址
…
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
-
行内元素
与其他行内元素共享一行空间
不可以指定宽高，宽高默认有内容决定，没有行高
一般不会在行内元素中插入块级元素span a color text-decoration href 3. 邮件 mail:haoli0115@outlook.com 打开本地邮箱系统 gmail、163 用户名 密码 网易邮箱客户端 开启启动 收邮件（工作安排） 1. 锚点 当前页面跳转 1) 定义锚点 <div id="top"></div> 2) 设置跳转 <a href="#top"></a> 2. 路径 1) url http://127.0.0.1 https://www.baidu.com 2) 绝对路径 /Apache24 3) 相对路径 day01 当前目录下的day01目录 ./ 当前目录下 ../ 上一级目录下 target _self _blank img src 路径 1. url 图片上传，第三方图片托管 <img src="https://tptg.com/1.jpg" alt=""> 2. 绝对 / 3. 相对 ./ ../ alt 当图片显示不出来的时候的文本替换 装饰类标签 i b strong sub sup del ...- 功能性标签
表格
- 功能性标签
table (border,width,cellspacing)
thead
tr
th(width,rowspan,colspan)
tbody
tr
td
tfoot
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
8) 表单
form
method:get/post/delete/put...
表单提交方式
get:
1. 明文在浏览器地址栏里直接看到
login?user=terry&password=123
2. 参数长度受限
post
1. 将参数封装到请求体
user=terry&password=123
2. 参数长度不受限
action
处理程序的地址
http://127.0.0.1:8080/login
enctype
表单编码
application/x-www-form-urlencoded
注意：
1. 表单元素的name值无法省略
2. 请求路径(path /login)与查询字符串之间通过?隔开，查询字符串中包含了若干对参数，参数与参数之间通过&符号隔开，参数名与参数值通过=隔开
3. 要为所有的无法输入但是可以选择的表单元素添加value属性，当选中这个元素的时候，当前值就为该表单元素上的value值
1. input(type)
type="radio"
type="checkbox"
type="text"
type="password"
type="button"
type="reset"
type="submit"
type="file"
...
2. textarea
3. select
3899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
