标签
<标签名>标签体</标签名>
**标签可以嵌套,比如:
<marquee>
123
<input>
</marquee>
<标签/>(自结束)
标签的属性
<标签名 属性>
**必须由空格隔开标签名和属性
**不同的标签名有不同的属性
**如果出现属性冲突,先写的会被覆盖掉
HTML的基本结构
<!doctype html>
<html lang="zh-CN"
<head> <!--Specify the title of the webpage and do not display it on the page; Nested tags in the head tag require specific content. If it is a body only tag, it cannot be rendered and will automatically move to the body-->
<meta charset="UTF-8">
<tittle>Layout label</tittle>
</head>
<body> <!--Specify the content of the webpage to display on the page-->
<h1>First level title</h1> <!--a function noticing the tittle-->
<h2>Second level title</h2>
...
<div> <!--div is a function of packaging the main text-->
<p>main text</p> <!--a function noticing the maintext ,it can not contain other functions like div or head-->
<p>main text</p>
</div>
</body>
</html>语义
语义化标签:用特定的标签表达特定的含义,标签的默认效果不重要,语义最重要,因为默认效果可以通过CSS随意更改,比如h1标签,效果是文字很大(不重要),语义是网页主要内容(很重要)
而语义做标准有以下好处:
1.代码可读性强
2.有利于SEO(搜索引擎优化)
3.方便设备解析
块级元素与行内元素
块级元素的特点:独占一行,大多是排版类的标签
行内元素的特点:不独占一行
<span>
规则一:块级元素中能写行内元素和块级元素
规则二:行内元素能写行内元素,但不能写块级元素
规则三:h1-h6不能互相嵌套
规则四:P标签中不能写块元素
文本标签
用于包裹词汇和短语,通常写在排版标签里面.与排版标签的区别是排版标签更宏观(大段文字),文本标签更微观(词汇,短语).文本标签通常都是行内元素
em:斜体
strong:加粗,表示重要
span:包裹短语的通用容器,这样就可以在head里直接快速设置span的元素特点了
不常用的文本标签
cite:作品标题,斜体
dfn:特殊术语,专用名词
del:表示删除的文本(删除线)
ins:表示插入的文本(下划线)
sub:下标文字
sup:上标文字
code:表示一段代码
samp:从正常的上下文中将某些内容提取出来
kbd:表示键盘输入
abbr:缩写
bdo:翻转两种可选值:ltr代表从左到右翻转,rtl代表从右到左翻转
var:标记变量
small:附属细则,包括版权法律文本等
b:摘要中的关键字/评论中的产品名称
i:呈现字体图标
u:与正常内容有反差的文本
q:短引用
blockquote:长引用(块元素)
address:地址信息(块元素)
不常用的文本标签没有必要过于纠结(不用也行);
有些语义感不强(就是指说明这个是什么,除了加强可读性就没别的用了)的标签很少使用,比如small/b/u/q/blockquote;
需要记住的是重要的,语义感强的标签,比如h1-6/p/div/em/strong/span
图片标签
<img width="宽度" height="高" src="图片路径(图片与HTML文件是同级那么直接写文件名) alt="图片描述">
相对路径与绝对路径
./喜洋洋.jpg 或者./a/喜洋洋.jpg ../喜洋洋.jpg ->这是相对路径
E:/demo1/demo2/喜洋洋.jpg ->这是绝对路径
https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/0a2699b115ac45c8a9c5f3a999572ecb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1702002938&x-signature=bOI%2F069TfZDslUBEctCWH%2FqqR4g%3D*图片格式特点:
jpg和jpeg-有损,空间小,不支持透明背景,缩放模糊
png - 无损,空间中等,支持透明背景,支持缩放不模糊
bmp - 无损,细节更多,空间占用极大,不支持透明背景
gif - 颜色支持少(256种),支持动态图,支持简单透明背景
webp - 兼容性差,但是具备上述几种格式的有优点
base64 - 纯文本形式保存的一段通过将图片转化成为的编码,必须通过浏览器打开,直接作为img标签的src属性值即可,并且不受文件位置的影响;通常用于保存一些较小的图片和一些需要和网页一起加载的图片
超链接
<a href = "链接地址" target = "_self(当前页打开)/_blank(新建标签页打开)"
链接地址可以是外部网页,也可以是内部网页,并且<a>标签是行内标签但是他可以包裹块标签和行内标签(但是不能包裹a标签)
跳转到锚点
1.设置锚点:
两种方式: <a name="test1"></a>(a标签配合name属性) 或者 <h2 id = "test2"></h2>(其他标签配合id属性)
2.跳转锚点:
<a href="#test1">去test1锚点</a>
<a href="#">回到顶部</a>
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<a href="">刷新本页面</a>
<a href="javascript:alert(1);">点我弹窗</a>
唤起指定应用
<a href="tel:10010">唤起电话</a>
<a href="mailto:123@qq.com">唤起邮箱</a>
<a href="sms:10086">短信练习</a>
超文本
组织信息的方式,通过超链接将不同空间的文字/图片等各种信息组织在一起,能从当前阅读的内容跳转到超链接所指向的内容(页面,文件,锚点,应用)
列表
列表分为有序列表(Ordered list)<ol>,无序列表(Unordered list)<ul>,自定义列表(Definition list)<dl>
基础结构为:
<h1>标题名称</h2>
<ol>
<li>列表项</li>
</ol>
效果是:
标题名称:
1....
2....
无序列表(DL)相同
自定义列表的结构:
<h1>标题</h1>
<dl>
<dd>列表项的描述</dd>
<dt>列表项的内容</dt>
</dl>
效果:
标题
描述1
内容1
描述2
内容2
注意:
<li>里可以包含超链接;
<li>最好不要单独使用;
列表里可以再包含列表,在<li>里,子列表的标题用<span>包裹
无序列表可以是导航栏,搜索结果和普通列表,而自定义列表一般都是在网页最底部的那些"关于我们""更多概况"等等
表格
表格的标签
<table>-表格
<captain>-表格标题
<thead>-表格头部
<tbody>-表格主体
<tfoot>-表格脚注
表格的结构
<table>
<captain>这里写标题</captain>
<thread>
<tr>
<th>这里写表头1</th>
<th>这里写表头2</th>
</tr>
</thread>
<tbody>
<tr> <!--这里写第一行对应的内容-->
<td>这里写第一列的内容</td>
<td>这里写第二列的内容</td>
</tr>
</tbody>
<td>备注<td>
</table>
表格的属性
首先在<table>里:
border="" - 外边框的宽度 width="" - 表格的宽度 height="" - 表格的高度(只调整表格内容的高,但是写在单独的表头行中,可以单独调整一行的高度)
cellspacing="" - 边框和边框之间的宽度
在<thead>等标签里:
align="left/right/center" - 水平居中方式 valign = "" - 垂直居中方式
跨行与跨列
rowspan="" 和 colspan="",写在tbody里的tr标签里,表示横跨几行或几列
补充几个常用标签
换行标签:在要换行的那一行加上<br>来换行
分割线:在要加分割线的那一行加上<hr>来分割
按原文显示:比如要显示一个空格组成的图像(html里多个空格会被显示成为一个),用<pre>标签来把原文包裹起来
表单
基本结构
<form action="点击按钮后,跳转的网址" traget="_blank/_self"(表示在新页面/当前页打开跳转的网址) methord="请求的类型,有get/post等等">
<input type="text" name = "wd"(这里是指将输入框的值命名,然后在跳转后的网址进行名值对匹配,不同的action的网页的name名不同))> ------这里是输入框
<button>搜索</button> ------这里是一个按钮,中间输入按钮内容
</form>常用的控件
文本输入框:
<input type="text">
常用属性为:name-数据的名称//value-属性的默认输入值//maxlength-输入框最大长度
密码输入框:
<input type="password">
常用属性为:name-数据的名称//value-属性的默认输入值//maxlength-输入框最大长度
单选框:
<input type="radio">
常用属性为:name-数据的名称//value-属性提交的值//maxlength-输入框最大长度,如果想要默认选择某个选项,可以在控件中加入checked属性
多选框:
<input type="checkbox">
常用属性为:name-数据的名称//value-属性提交的值//maxlength-输入框最大长度,如果想要默认选择某个选项,可以在控件中加入checked属性
隐藏域:
<input type="hidden">
常用属性为:name-数据的名称;value-数据的默认值
确认按钮:
<input type="submit"> 或者 <button type="submit">名字</button>
常用属性为:value-按钮的文字
重置按钮:
<button type="reset"></button> 或者 <input type="reset">
常用属性为:value-按钮的文字
普通按钮:
<button type="button">按钮文字</button>
8856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
