认识网页
网页的本质 前端代码
前端代码通过浏览器的渲染和解析形成用户看到的界面
网页由文字 图片 音频 视频 超链接 等等组成
浏览器是网页显示 运行的平台
内核不同 对代码的渲染速度不同
不同的浏览器解析出的结果也存在差异--内核不一样
web标准中分为三个结构
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式
行为 JS 网页模型的交互与页面交互1、HTML -- Hyper Text Markup Language 超文本标语语言
html的骨架
heml标签：网页的整体
head标签：网页的头部
body：网页的身体
title标签：网页的标题
shift + tab 返回tab
2、HTML标签的结构
开始标签 包裹的内容 结束标签
<strong>文字变粗</strong>
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成 双标签 前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成 单标签 自成一体，无法包裹内容。父子关系（嵌套关系）
兄弟关系（并列关系）
标签属性可以同时存在多个
属性之间用空格隔开
属性没有顺序之分
标题标签 自动加粗 独占一行
<h1></h1>标题标签 有1 ~ 6 数字越1越大
选中1 ctrl + d 自动选择<p></p>
段落标签 独占一行 段落之前存在间隙 用于分段显示<br> 单标签 强制换行<hr> 单标签 水平线<b></b>加粗
<strong></strong>加粗<u></u>下划线
<ins></ins>下划线<i></i>倾斜
<em></em>倾斜<s></s>删除线
<del></del>删除线<head>
<link rel="icon" href="./index.ico" 加载图标
</head>big 大文本标签
small 小文字标签<details>下拉列表
<summary>摘要</summary>
<p>下拉选项</p>
</details>锚点
<a name="one">锚点</a><!--在此处打标记-->
<a href="#one">跳转</a><!--点击跳转到锚点处-->为突出重要性的强调语境就用长标签
媒体标签
<img stc="路径" alt="加载失败" title="鼠标悬停提示文本" width="宽度" height="高度">单标签 alt替换文本 当图片加载不出来就显示文字 宽度和高度只设置一个时 另一个等比例显示 使图片不变形相对路径
同级目录 src="目标图片.gif" src="./目标图片.gif"
下级目录 src="images/目标图片.gif"
上级目录 src="../目标图片.gif"
音频标签
<audio src="music.mp3" controls loop autoplay></audio>
controls播放控件
loop循环播放
autoplay自动播放 部分浏览器不支持
音频标签目前只支持mp3 wav ogg视频标签
<video src="video.mp4" controls loop auto autoplay muted></video>
autoplay 谷歌浏览器需要配合muted实现静音播放
muted 自动播放静音连接标签
a标签 超链接 锚标签
<a href="https://www.baidu.com">百度</a>
<a href="./相对路径.html">相对路径</a>
<a href="#">空链接</a>
<a href="" target=_blank></a>
href跳转路径
target _self默认值 原窗口跳转
_blank 新窗口跳转列表标签
按行排列 新闻列表 排行榜 账单
无序列表 有序列表 自定义列表无序列表
<ul></ul>无序列表的整体 用于包裹li标签
<li></li>无序列表的每一项 用于包含每一行的内容 每一项前面默认显示圆点有序列表
<ol></ol>
<li></li>列表前默认显示序号自定义列表
<dl></dl>表示自定义列表的整体 用于包裹dt/dd标签
<dt></dt>自定义列表的主体
<dd></dd>自定义列表的每一项内容
dd前默认显示缩进效果
dl标签之允许包含dt/dd标签
dt/dd标签可以包含任意内容表格标签
table 表格整体 包裹多个tr
tr 表格每行 可包裹td
td 表格单元格 包裹内容
table > tr > td
表格属性
<table border="1" width="" height="">
<caption></caption>
</table>
border 边框宽度
width 宽度
height 高度
caption 表格大标题默认在整体顶部居中显示 只写在table内部
th 表头单元格 默认加粗并居中显示 写在tr内部 用于替换td
表格标签用于内部包裹tr标签
thead 表格头部 包裹tr
tbody 表格主题
tfoot 表格底部
合并单元格
1、先明确合并哪几个单元格
一个单元格就1px 俩个就2px
2、上下合并 只保留最上边的 删除其他
左右合并 只保留最左边的 删除其他
3、rowspan 跨行合并 将多行的单元格垂直合并
colspan 跨列合并 将多列的单元格水平合并
只有同一个标签结构中的单元格才能合并 不能跨结构合并thead tbody tfoot表单标签
input 在网页中显示收集用户的表单效果 登录页、注册页
input 可以通过不通的type属性值展示不同的效果input 属性名
<input type="text" placeholder="用户名">
placeholder占位符 提示性文本
type="radio"
name 分组 相同name值单选框为一组 一组只有一个能被选中
checked 默认选中
type="file" 文件属性
multiple 多文件选择
<input type="file" multiple>
type="submit" 提交按钮 点击提交数据给后端服务器
type="reset" 重置按钮 点击恢复表单
<input type="button" value=""></input>普通按钮 默认无功能 配合JS使用
以上标签需配合 form标签使用 value显示内容
submit只能提交button标签 不用配合form button可靠JS实现不同的功能
<button type="submit">提交按钮</button>
type属性值
submit 提交按钮 点击提交数据给后端服务器
reset 重置按钮 点击恢复表单
button 普通按钮 默认无功能 配合JS使用select标签
select下拉菜单的整体
option下拉菜单的每一项
selected下拉菜单默认选中 加在option中textarea文本域标签 在网页中提供可输入多行文本的表单控件 右下角可以拖拽改变大小
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
<textarea col="50" rows="50"></textarea>label标签 实现点击文本实现对应功能
使用方法1
1.使用label标签把内容(如:文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
性别:<input type="radio" name="sex" id="man"<label for="man">男</label>
使用方法2
1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
<label><input type="radio" name="sex">女</label>form
只有 method="post"时才使用 enctype 属性。
<form action="url" enctype="">
application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plainGET POST 区别
1、最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
2、post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）。
3、post发送的数据量更大（get有url长度限制）。
4、post能发送更多的数据类型（get只能发送ASCII字符）。
5、post比get慢。
6、Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。
7、get会将数据缓存起来，而post不会。
8、post请求包含更多的请求头。
9、post在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据。语义化标签
场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签div标签: 一行只显示一个 (独占一行)
span标签:一行可以显示多个 不换行网页只认识一个空格 多个空格不显示
扫一扫
2520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
