HTML基础
发布日期：2021-05-14 16:20:31
浏览次数：20
分类：原创文章
本文共 5560 字，大约阅读时间需要 18 分钟。
什么是HTML
- HTML
-
Hyper Text Markup Language(超文本标记语言)
-
目前我们最新的HTML已经到了第五代 也就是我们最常说的 H5
-
第一个HTML网页
<!-- DOCTYPE:告诉浏览器,我们要使用什么规范 --><!DOCTYPE html><html lang="en"><!-- 注释的快捷键 ctrl+/ --><!-- head 标签代表网页的头部--><head><!-- meta 描述标签，它用来描述我们网站的一些信息--><!-- meta 标签 一般来做SEO--><!-- SEO一般有两个需要做：一个是站内优化，另一个是站外优化，这样效果才能更好！站内优化：关键字优化，内容优化，标签优化，标题标签优化，关键字和原始文章增加，这对SEO来说是十分必要的。站外优化：要做友联，外链的添加，针对站点里边的产品，服务，特征等进行优化操作。--> <meta charset="UTF-8"> <meta name="keywords" content="开始学习HTML了"> <meta name="description" content="跟上我打一个HTML网页"><!-- title 标签代表网页的标题--> <title>我的第一个网页</title></head><!--body 标签代表网页的主体 --><body>我的第一个html网页</body></html>想要查看meta标签里面的内容
- 打开浏览器 右击 查看网页源代码就会出现
网页的基本标签
标题标签
<h1>一级目录</h1> h1到 h6段落标签
<p></p> 段落标签 段落标签属于块级元素 块级元素独占一行所以 每一组p标签结束后会自动换行换行标签
<br/> 换行标签 在文章想换行的时候 加上<br/> 水平线标签
</hr> 水平标签 有一条分割的直线字体样式标签
粗体 ：<strong> 这个是粗体的文字</strong>斜体 : 这个字体是斜体 <em><这个字体是斜体/em>注释和特殊符号
注释 ：<!---->空格 ：  ；大于号 : >小于号 ：<版权所有符号 ：©所有的特殊符号都是 &开头 ;结尾图像标签
<!-- img的学习 src ：图片的地址 这个必须填 src 里面可以填相对路径和绝对路径 相对路径就是 在本项目目录下的路径 推荐使用相对路径 绝对路径是 图片处于计算机中的路径 这样就会把图片写死 不推荐 ../ 返回上级目录 alt： alt 是如果图片不能正常显示的话 图片就会出现alt里面的内容。title: 悬停文字 鼠标放在图片上 就会显示出文字-->案例：<img src="../img/1.jpg" alt="图片">链接标签
<!-- a 标签href： 必填 表示要跳转到那个页面target: 表示窗口在哪里打开 _blank 在新标签中打开 _self 在自己网页中打开--><a href="https:www.baidu.com" target="_self">我要跳转到百度</a>a标签中间不光可以有文字 还可以有图片 可以点击图片进行跳转<a href="https:www.baidu.com"><img src="../img/1.jpg" alt="图片"></a>锚链接
- 使用锚链接需要一个锚标签
- 跳转到标记处
- 锚链接不光可以在本页面进行跳转 还可以跨页面进行跳转
<a name="#ccc">顶部</a>正文<a herf="#ccc">点击返回顶部</a>功能性链接
邮件链接：mailto
<a href="mailto:XXXXXXXXXXXX@qq.com">点击联系我的邮箱</a>qq推广 :
- 百度搜索qq推广，并找到官网
- 登录qq 点击 推广工具
- 输入你的内容 并且 复制到你的网页中
- 就可以使用了
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=408750259&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:408750259:53" alt="发消息" title="发消息"/></a>行内元素和块级元素
块元素
- 无论内容多少 该元素独占一行- <p></p> <h1-h6></h1-h6>行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一排- a strong em ....列表标签
<!--有序标签 适用范围 ： 试卷 问道 --><ol> <li>Java</li> <li>C#</li> <li>Python</li> <li>C</li> <li>HTML</li> <li>JS</li></ol><!--无序列表适用范围： 导航 侧边栏--><l> <li>Java</li> <li>C#</li> <li>Python</li> <li>C</li> <li>HTML</li> <li>JS</li></l><!--自定义列表适用范围：公司网站底部dl：标签dt：列表名称dd：列表内容--><dl> <dt>个人资料：</dt> <dd>姓名</dd> <dd>年龄</dd> <dd>性别</dd> <dd>地址</dd> <dt>购物平台：</dt> <dd>淘宝</dd> <dd>拼多多</dd> <dd>京东</dd> <dd>小米商城</dd></dl>媒体元素（音频和视频）
<!-- 音频和视频src :资源路径controls : 控制条autoplay : 自动播放--><!--<video src="./resource/video/元旦视频.mp4" controls autoplay></video>-->y<audio src="./resource/audio/5e8c684ec85e0.mp3" controls autoplay></audio>页面结构分析
<header> <h2>网页头部 </h2></header><section> <h2>网页主体 </h2></section><footer> <h2>网页尾部 </h2></footer>内联框架
<!--iframe 内联框架src : 跳转的地址name : 框架的名称--><iframe src="" name="bk" frameborder="0" width="1000px" height="1000px"></iframe><a href="列表.html" target="bk">点击跳转</a>表单提交
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Form表单提交</title></head><body><h1>注册</h1><!-- form 表单提交action : 表单提交的位置 可以是网站,也可以是请求处理的地址method: 提交的方式有两种 1.post 这个相对来说比较安全 传输大文件 2.get 我们可以在url里面看见我们提交的信息 不安全 但是高效--><form action="列表.html" method="post"><!-- type 标签里 还可以有其他属性 maxlength : 这个表示这个文本框里面最大可以输入几个字符 value: 网页刚打开时 文本框的默认的值 --> <p>姓名 <input type="text" name="username" value="XXX" readonly placeholder="请输入用户名"> </p> <p>密码 <input type="password" name="pwd" value="123456" required></p><!-- 单选按钮 标签 type="radio" value :单选框的值 name:表示组--> <p>性别: <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女" disabled>女 </p><!-- 多选框标签 type="checkbox"--> <p> 爱好: <input type="checkbox" name="hobby" value="sleep">睡觉 <input type="checkbox" name="hobby" value="code" checked>敲代码 <input type="checkbox" name="hobby" value="play">玩 <input type="checkbox" name="hobby" value="eat">吃好吃的 </p><!-- 按钮type="button" 普通按钮type="image" 图片按钮type="submit" 提交按钮 type="reset" 重置按钮--> <p> <input type="button" value="点我"><!-- <input type="image" src="./resource/img/53.jpg">--> </p> <p>选择国家：<!--下拉列表 --> <select name="gj"> <option value="china">中国</option> <option value="USA">美国</option> <option value="deguo" selected >德国</option> <option value="yidali">意大利</option> </select> </p><!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10"> </textarea> </p><!-- 上传文件--> <p> <input type="file" name="wj"> <input type="button" value="上传"> </p><!-- 简单的验证email 必须包含@ 和 . 但是 这个验证不严谨--> <p>邮箱： <input type="email" name="email"> </p><!-- url 这个判断是不是一个网址--> <p>url: <input type="url" name="url"> </p><!-- number 判断里面是否是数字 max="100": 这个标签里面 最大输入100 min="10" 这个标签里面 最小输入10 step="20" 这个标签里 的数字 每次+20--> <p>number: <input type="number" name="number" max="100" min="10" step="20"> </p><!-- 滑块--> <p>调节音量 <input type="range" name="voice" max="100" min="0" step="2"> </p><!-- 搜索框--> <p>搜索框: <input type="search" name="search"> </p><!-- 增强鼠标的可用性--> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p> <p>正则表达式邮箱： <input type="type" name="email1" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"> </p> <p><input type="submit"> <input type="reset"></p></form></body></html> 初级表单验证
placeholder 提示信息required 非空判断pattern 正则表达式发表评论
最新留言
逛到本站，mark一下
[***.202.152.39]2025年05月01日 08时28分51秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
python学习笔记6.3-类的属性函数(@property)
2021-05-15
U3D实现WebCamera显示
2021-05-15
python爬虫实战：爬取天气数据的实例详解
2021-05-15
方法的重载
2021-05-15
SpringCloud第七章Ribbon负载均衡服务调用
2021-05-15
Python我的模块-字符替换
2021-05-15
"cannot be resolved or is not a field"问题解决
2021-05-15
serialVersionUID作用
2021-05-15
Android Eclipse svn插件安装说明
2021-05-15
Android判断是否是平板
2021-05-15
C++中的字节对齐，以及空结构体，数组，union类型的实践
2021-05-15
"compileDebugJavaWithJavac"错误解决
2021-05-15
Android系统原理及开发要点详解
2021-05-15
如何选购android图书
2021-05-15
如何删除Android自带的应用程序？
2021-05-15
Android基础#22：Android handler用法详解2，例2
2021-05-15
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 461305049 位访客