Web前端笔记(标签)
目录
Web前端知识点
HTML
标签的语法
html标签
主体框架
常用标签
标题标签
段落标签
字体倾斜、加粗、下划线
强调内容
预设标签
字体标签
分割线
实体字符
图片标签
视频标签
音频标签
超链接标签
列表标签
表格标签
窗口化设计
Web前端知识点
- html:网页里存在的东西，比如图片、超链接、文字
- css：美化页面
- JavaScript：前端编程
- JQuery：轻量级的JavaScript框架
- Vue：前后端分离
HTML
超文本标记语言
超文本：文本、超链接、表格、音乐、视频、图片等
标签的语法
标签的语法
<html> 标签内容 <\html>
<br />自闭和语言(单标签)
标签的嵌套：<html><body> 内容 <\body><\html>
标签属性<html 属性名='属性值'><\html>
标签不区分大小写，文件后缀名是.html 或者 .htm，html不需要编译，可以直接在浏览器上运行。
html标签
主体框架
<!-- DOCTYPE:文档类型 -->
<!DOCTYPE html>
<!-- 根标签：最外面的标签html,只能有一个 -->
<html><!-- 头信息：文件描述，标题...版本、字符集，文件(css/js)的引用 --><head><!-- 元数据,内容不会显示在网页上 --><meta charset="utf-8"><!-- 标题 --><title></title></head><body><!-- 网页的正文 -->在这里写的东西都会写到网页上，保存后就能实时查看，不需要编译，html遇到错误也不会停止运行，会跳过错误继续加载别的标签</body>
</html>常用标签
一部分标签已经在html5当中过时，可以用css和javascrip完成。
标题标签
标题标签独占一行，支持1~6级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>段落标签
段落标签会在结束后自动换行两次，以此区别出其他段落
<p><!-- 下面这个东西是用来自动生成随便长度的字符串，在Lorem后写个数字再按Tab可以再生成对应数字个单词 -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus molestias eos soluta optio corrupti necessitatibus nisi expedita, omnis repellendus porro rerum debitis ad perspiciatis. Atque quasi numquam distinctio fugit tenetur!
</p>字体倾斜、加粗、下划线
<i>字体倾斜 </i>
<b>加粗 </b>
<u>下划线 </u>
<i><b><u>倾斜加粗又下划线 </u></b></i>强调内容
强调的内容会比i标签更倾斜一些
<em>被强调的内容</em>
<strong>加粗的强调内容</strong>预设标签
预设标签里的内容是怎么样的那显示出来的就会是怎么样，包括换行、缩进
<pre>第一行第二行第三行
</pre>字体标签
已过时，用来设置颜色大小，color属性可以是red/green/blue等单词，也可以是十六进制数(#ffffff 白色)，还可以用rgb表示
font color="red" size = 1>红色</font> <!-- 所有属性值可以加双引号也可以不加 -->
<font color=#00ff00 size = 2>绿色</font> <!-- size范围1~7 -->
<font color='rgb(0,0,225)' size = 3>蓝色</font><!-- rgb好像不支持蓝色的显示 -->分割线
noshade:规定 hr 元素的颜色呈现为纯色
<hr size="1">
<hr size="100">
<hr size="100" noshade="noshade">
<hr size="100" noshade><!-- 属性名和属性一样的时候,可以省略属性值 -->实体字符
如果在html中想表示<p>这样和标签重复的情况，需要用实体字符来代替，具体参照API
<p> 段落
<p>段落
<br>图片标签
src：图片路径，只能使用工程下的资源，即用相对路径填写，用绝对路径只能在自己的电脑上运行
width/height：设置宽/高，当只设置一个属性时会等比例缩放
title：鼠标放在图片上会显示title内容
alt：当图片加载不出来时显示的内容，用来标识和区别
<img src="..\img\image.jpg"><!-- src属性必须填,只能使用工程下的资源(相对路径) -->
<img src="..\img\image.jpg" width="100"><!-- 设置大小 -->
<img src="..\img\image.jpg" width="100" height="200"><!-- 如果只设置一个,就等比例缩放 -->
<img src="..\img\image.jpg" width="100" title="鼠标放在图片上就会有标题">
<img src="..\img\image.jpg" width="100" alt="图片加载不出来的时候显示的内容">视频标签
autoplay：自动播放
controls：加控制器(进度条、暂停、音量)
loop：循环播放
width/height：宽/高设置，和图片标签同理
<video src="..\img\video.mp4" height="400" controls loop><!-- 这里可以选择备选资源列表,要用这些的话要把video里的src去掉 --><source src="../img/不存在的资源1.mp4"><source src="../img/不存在的资源2.mp4"><source src="../img/不存在的资源3.mp4"><source src="../img/video.mp4">
</video>可以嵌入网上的视频，效果仅同于开一个小窗播放，在网上视频下面点分享可以获得链接或者直接获得代码
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t0043c0o3gh" allowFullScreen="true" ></iframe>音频标签
属性都同理视频标签
<audio src="..\img\audio.mp3" controls autoplay loop></audio>超链接标签
herf：跳转的网页
target：_blank打开新的页面跳转，_self刷新当前页面跳转
<a href="demo01.html">链接到自己工程里的.html</a>
<a href="https://www.baidu.com/" target="_blank">链接到百度</a><!-- 一定要加协议()http等 -->
<a href="#">回到顶部</a>锚点跳转(跳转到本网页指定位置)
<a name="随便取一个锚点名">锚点跳转的地方</a>
<a href="#随便取一个锚点名">通过锚点跳转到指定锚点</a><!-- 超链接跳转到固定的锚点(第39行),href里用#+锚点名来标记,如果有多个同名锚点,跳转到最上面的 -->列表标签
有序列表：ol
无序列表：ul
子列表(列表中的一项)：li
type：列表序号的风格，可以选择阿拉伯数字类型，也可以选择罗马数字等类型
start：开始的序号
<ol type="I" start="2"><li>苹果</li><li>香蕉</li><li>梨</li></ol><ul type='square'><li>肥牛</li><li>黄喉</li><li>撒尿牛丸</li>
</ul>表格标签
<table>：表格声明
- border：边框宽度
- cellspacing：单元格之间的空隙
- cellpadding:单元格内容和边框的边距
- bgcolor:背景色
- aligh:表格对齐方式(表格再在网页中的位置)
<caption>：表格的标题
<tr> 表格中的一行
- aling：表格内容的对齐方式(内容在表格中的位置)
<td>：一个单元格的内容
- aling：这个单元格内内容在该单元格中的位置
- rowspan:放在td里使用,向下合并单元格
- colspan:放在td使用,向右合并单元格
<table border="1" cellspacing=0 width=500 cellpadding=10 bgcolor=#FFA073 align="center"><caption>表格的标题</caption><tr align="center"><td align="left">序号</td> <td >姓名</td> <td >年龄</td></tr><tr ><td rowspan="2">1</td> <td colspan="2">张三</td> </tr><tr><td>李四</td> <td>20</td></tr>
</table>table的三部分(只是一个标记,是一个规范)
<table><caption></caption>表的标题<thead></thead> 表的第一行(会被加粗)<tbody></tbody> 表主体(可以有多个)<tfoot></tfoot> 表尾
</table>窗口化设计
将页面分割成几个窗口，可以在不同的小窗口里放不同的网页
noresize：窗口固定(不能调整大小)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>窗口化设计</title></head>
<!-- 窗口化设计不需要有标签 -->
<frameset rows='30%,*' noresize><frame src=demo01.html><frameset cols = '50%,*' ><frame src=demo02.html name = '配合target,在超链接点击后会在这个框里跳出来'><frame src=test.html ></frameset>
</frameset>
</html>Web前端笔记(标签)相关推荐
- Web前端 笔记 （21-45）
Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...
- Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位 脱离文档流 使内联支持宽高 使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
- Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
- WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
- Web前端笔记-i标签做小图标以及改源码注意事项
目录 最简单的使用i标签做小图标 修改前端源码注意的问题 最简单的使用i标签做小图标 运行截图如下: 实例结构如下: 此处就是使用i标签制作的小图标 其中html源码如下: <html> ...
- Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
- web前端笔记1-hml，css部分
这里写目录标题 一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
- （web前端笔记）2020-12-23（ajax）
From web sites to web applications client/server bs架构带来了和cs架构完全不同的形式 basic three-tier(三次架构) user int ...
- Web前端笔记（6）
BFC规范: 格式化上下文(Formatting Context)是W3C规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的相关和 ...
最新文章
- 技术感悟--回顾2012
- MySQL设置表的字段值自动增加
- 迷宫收集星星 并查集解答
- python 局域网扫描_Python 简化版扫描局域网存活主机
- 推荐系统(1)-概述
- Spring ：Spring AOP 中的一些术语
- python是什么类型的语言
- C#实现鼠标进入按键范围后按键自动窗体内位置移动
- Effective C++ 条款 50：了解new和delete的合理替换时机
- 代码开源许可证 区别 Apache MIT GPL
- 签到活动 测试要点分析
- 谷歌广告已拒登：恶意软件或垃圾软件 如何解决
- latex引用文献，带DOI
- 使用JPBC实现双线性对加密算法（BasicIdent体制的java实现）
- C# 强化系列文章四：匿名方法的使用
- Android项目实战--手机卫士01--启动界面
- 原码，反码，补码，全面解析
- 语音转文字怎么转？三个方法让你学会怎么语音转文字
- android TP
- 生产环境centos7 安装mysql 5.7.35