从HTML开始
<html>:做网页,是一种超文本标记语言。
超文本:既有添加文本的能力,还可以添加图片,视频等多媒体元素。
标记:由标签组成。不同的标签有不同的效果。
开始标签,结束标签。 如:张三开始 - 张三结束。
<title>:标题内容</title>是整个网页的标题标签。
<!doctype html><!--文档声明,告诉浏览器以什么样的标准来解析该网页--> <html><!--根标签的开始--> <head><!--头部标签的开始--> <meta charset="utf-8"><!--设置网页的编码,设置UTF-8,可防止中文乱码--> <title>我的第一个html文件</title><!--设置网页的 标题--> </head><!--头部标签的结束--> <body><!--身体标签的开始--> hello阿萨德 </body><!--身体标签的结束--> </html><!--根标签的结束-->
1.常用的标签
标题标签字体加粗 h1~h6 字体逐渐变小,自动换行 换行标签 <br/> 标尺线标签 <hr/> marquee 弹幕效果 direction 方向 left(左) right(右) up(上) down(下) scrollamount 设置速度,值越大,越快 behavior scroll(循环滚动) slide 一次,走完即停 alternate 交替滚动(来回滚动) height 设置高度 加粗 strong b 斜体 i em 图像标签 img src 图片的路径(相对路径和绝对路径) title 鼠标悬浮在图片上显示的内容 alt 图片无法加载时,显示的内容
2.单标签和双标签
单标签:单独一个标签 比如<br>…
双标签:成对存在的,比如<h1></h1>…
3.相对路径和绝对路径
html导入外部资源
相对路径
相对当前页面的位置,去寻找另外一个资源
./ 当前目录
../ 上一级目录
../../ 上二级目录
绝对路径
从网站根目录寻找另外一个资源
./是同级
../是去上一级
../images/a1.jpg,去当前文件的上一级寻找名字为images的文件夹,再到images文件夹下面寻找a.jpg
4.超链接 a标签
<a href="http://www.baidu.com" target="_blank"> 点击</a> href:设置要打开的链接 target:设置在何处打开 _self:在本窗口打开 _blank:在新窗口打开 还可在iframe中打开 _top:回到顶部
5.转义字
空格 < < > > © ©版权符号
6.锚链接
定义一个锚点 <a name="mao">锚点位置</a> 跳到锚点位置 <a href="#mao">跳到锚点</a>
7.列表
有序列表 <ol type="I" start="2"> <!-- 定义一个有序列表 --> <li>第1项</li><!-- 定义一个列表项 --> <li>第2项</li> <li>第3项</li> <li>第4项</li> <li>第5项</li> </ol> type:设置序号的类型 A a 1 i I start:设置开始序号 无序列表 <!--disc黑点 circle圆 square黑方块 --> <ul type="square"> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> 自定义列表 <dl> <dt>张艺兴</dt> <dd>是一个....</dd> </dl> dd相对于dt有缩进
8.行级标签、块级标签
P标签 段落标签:自动换行,段前段后间隔比较大
行级标签:不会自动换行,设置宽高无效,比如:a ,strong
块级标签:会自动换行,可设置宽高 h1 , h2 , p
行内块:不会自动换行,可设置宽高 比如 img
9.表格table
行,列,单元格,边框,内容位置,合并 基本结构 <table border="1" width="400" height="400"> <tr> <td align="left">11</td> <td></td> <td></td> <td></td> </tr> </table> 顺序:table>tr>td tr:行 td :单元格 对一个td设置width, 那该列的width都是一样的(列宽) 对一个td设置height, 那该行的height都是一样的(行高) 和把height设置在tr上是一样的效果 align: 设置在td上,是设置该td内容的水平位置 left(左),right(右),center(中) 设置在tr上,是设置该tr里所有td内容的水平位置 valign: 设置在td上,是设置该td内容的垂直位置 top(上),middle(中),bottom(下) 设置在tr上,是设置该tr里所有td内容的垂直位置 cellspacing:设置单元格之间的距离 cellpadding:设置单元格内容与单元格之间的距离 colspan:跨列(左右合并) colspan=”n” 对应的该tr要删n-1个td rowspan:跨行(上下合并) rowspan=“n” 对应的下n-1的每一行都要删除一个td
10. 表单元素表单form:将前台填写的数据传到后台
<form action="http://www.taobao.com"></form> action:设置提交的地址 method:设置提交方式(post,get) https://www.taobao.com/?user=zhangsan&pwd=123
文本输入框: <input type="text" >
密码框 <input type="password" >
提交按钮 <input type="submit">
单选框 <input type="radio" name="sex">男 <input type="radio" name="sex">女
复选框 <input type="checkbox" name="love"> 看电影 <input type="checkbox" name="love"> 打球 <input type="checkbox" name="love"> 敲代码
下拉选择 <select name="stu" > <option value="ben">本科</option> <option value="yan">研究生</option> <option value="bo">博士</option> </select>
textarea 多行文本域 <textarea name="" cols="30" rows="5" >11111</textarea>
图片提交按钮 <input type=“image” src=“路径”> <inputtype=“submit”>
重置按钮 <input type="reset"><!-- 重置按钮,清空表单 -->
普通按钮 <input type="button" value="按钮">
文件选择 <input type="file"> 用于文件上传
隐藏域 <input type="hidden"> 在页面不展示
12.一些属性
placeholder 表单提示信息
readonly 只读
disable 不可用,不会提交
required 必填
hidden 隐藏
checked 单选、复选的默认选中
selected 下拉选择框的默认选中
13. 网页框架
iframe <iframe width="500" height="500" src="http://www.taobao.com" frameborder="1"></iframe> src=网页的路径 frameborder 边框 scrolling="no" 去掉滚动条 yes 加上滚动条
frameset <frameset cols="25%,*"> <frame src="http://www.baidu.com"></frame> <frame src="http://www.baidu.com"></frame> </frameset> Cols:将网页左右分割 Rows:将网页上下分割 两者对比 Iframe比frameset灵活,在使用frameset时需删除body,并且也不能添加其他的元素到网页中,而iframe可以,并且iframe可以嵌套在其他标签里,位置是任意的。推荐使用iframe.
14.标注
<input id="man" type="radio"> <label for="man">男</label>
bug怎么这么多!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战