目录
一、 什么是HTML
二、编辑器
三、Html的基本骨架
四、html基本标签
h、p、img、a、audio、video、ul>li、ol>li、dl dd dt、span、div
一、 什么是HTML
Hyper text markup language 超 文本 标记 语言
HTML是用标记标签来描述网页的一种语言。
HHTML文档包含HTML标签和文字。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- 没有办法记录内容的样式（大小 颜色等）
- 通过给没有样式的文本加上标签的形式 让文本在网页中显示 具体的语义
二、编辑器
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
01、 sublime （效率较高）
02、 DreamWeaver
03、 记事本
三、Html的基本骨架
1 <!--文档类型声明：h5--> 2 <!DOCTYPE html> 3 <!--html文档开始--> 4 <html lang="en"> 5 <!--html的头部 经常用来引入外部文件--> 6 <head> 7 <!--meta:元数据 --> 8 <!--utf-8:国际通用字库 里面包含了所有国家的所有语言--> 9 <!--gbk/gb2312:是国标字库 里面包含了中文 和少数外文--> 10 <meta charset="UTF-8"> 11 <!--标题标签 显示在网页的标题栏--> 12 <title>我的第一个页面</title> 13 </head> 14 <body> 15 定义文档的主体 16 </body> 17 18 </html> 19 20
四、html基本标签
1、 标题标签
h head line 标题的意思
<h1>~<h6>
<!--<h1> 我是标题</h1>-->
<h1>我是标题1号</h1>
<h2>我是标题2号</h2>
<h3>我是标题3号</h3>
<h4>我是标题4号</h4>
<h5>我是标题5号</h5>
<h6>我是标题6号</h6>
2、 段落标签
p paragraph
<br /> 标签 在一个段落中换行
3、 图片标签
img image
<img src="18.jpg" alt="图片加载失败" title="我贴了双眼皮贴">
4、a 标签
<!--a: anchor 锚点标签-->
a标签跳转方式
01、 不同页面之间的跳转
<!--hyper text reference ：超文本引入--> <a href="22.html" title="我要走了 正如我亲亲的来">跳到22</a>
02、 跳转到外部页面
<a href="http://www.baidu.com" title="找度娘">百度</a>
03、 页面内部的跳转
-01、 从底部到顶部
<!--#号键代表占位符--> <a href="#">去顶部</a>
-02、从一个点到另一个点
<a href="#here">去here</a> <a name="here">Her在这 来找我呀</a>
5、路径
01、 相对路径
根据其中一个地址的改变 变化另外一个路径
同级：直接写路径
从外向内；一层层找有一层加一个 /
<a href="demo1/demo2/demo3/girlFriend.html">我单身要去找女朋友</a>
从内向外
<a href="../../../h2/money.html">我很穷 急需money</a>
6、媒体标签
<title>音频标签</title> </head> <body> <!--controls:控制器 添加控制器之后 才会让音频文件显示--> <!--autoplay:自动播放--> <!--loop 循环播放--> <!--<audio src="../audio/2.mp3" controls autoplay loop>您的浏览器版本过低 扔了吧</audio>--> <!--<h1>我是标题</h1>--> <!--<img src="../imgs/8.jpg" alt="">--> <video src="../video/1.mp4" controls>您的浏览器版本过低 请升级</video> </body>
7、列表标签 (组标签)
01、无序列表
（unordered list）<ul>
列表项 （list item）<li>
<style> ul { list-style: none; } li { width: 100px; height: 50px; text-align: center; line-height:50px; color: #fff; float: left; } a { display: block; text-decoration: none; } a:hover { background-color: black; color: yellow; } </style> </head> <body> <!--<ul>--> <!--<li>南京</li>--> <!--<li>上海</li>--> <!--<li>西藏</li>--> <!--<li>敦煌</li>--> <!--</ul>--> <!--ul>li*5--> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">企业简介</a></li> <li><a href="#">作品展示</a></li> <li><a href="#">合作咨询</a></li> </ul>
02、有序列表 ol li
<h2>我喜欢的歌曲排行榜榜</h2> <ol> <li>最炫民族风</li> <li>小苹果</li> <li>忐忑</li> <li>平凡之路</li> </ol>
03、自定义列表
01、definition list dl 定义列表
Definition title dt定义标题
Definition description dd 定义描述词
<dl> <dt>青岛</dt> <dd>虾 啤酒 </dd> <dt>新疆</dt> <dd>手抓羊肉 大盘鸡 饼</dd> <dt>澳大利亚</dt> <dd> 袋鼠 羊 龙虾</dd> </dl>
8、span 和 div
01.、div ; division 分割的意思,常见用途是文档布局
02、span 范围的意思
区别：
A、两者本身都有区域划分的意思，根据语义不具有任何样式产生
B、div 在 css 里面是块级元素，span是行内元素
C、div 在 HTML里面是容器级元素，span是文本级元素
文本级标签：里面可以放 文字 图片 表单元素
a img p span
容器级标签：里面什么都可以放 包括自己
Ul li ol li dl dt dd div
<style> div { width: 200px; height: 200px; } span { width: 200px; height: 200px; background-color: #0000ff; } </style> </head> <body> <div> 今天阳光明媚 </div> <span> 今天多云 </span> <span> <div></div> </span> <p> <a href=""></a> 文本 <img src="" alt=""> </p> </body>
9、表单元素 form
表单就是用来收集用户信息 让用户填写或者选择的
<style> textarea { /*让文本域大小不可更改*/ resize: none; } </style> </head> <body> <form action="#" method="post"> <p> <!--input:表示的是 输入的部件--> <!--type:表示这个表单的类型--> <!--text：表示的是文本框--> <label for="username">用户名：</label><input type="text" placeholder="请设置用户名" id="username" name="username" maxlength="4" autocomplete="on" autofocus required readonly> </p> <p> 手机号：<input type="tel" placeholder="请输入手机号" name="tel"> </p> <p><label for="password">密码：</label><input type="password" placeholder="请输入密码" id="password" name="password" required></p> <p>邮箱：<input type="email"></p> <p>出生日期：<input type="date"></p> <!--name:增加元素的互斥性--> <p>性别：<input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" checked>女 <input type="radio" name="sex" value="保密">保密 </p> <p>兴趣： <input type="checkbox" name="hobby" value="吃饭" checked>吃饭 <input type="checkbox" name="hobby" value="睡觉" checked>睡觉 <input type="checkbox" name="hobby" value="吃鸡">吃鸡 <input type="checkbox" name="hobby" value="逛街">逛街 </p> <p> 所在地： <select> <option value="" >南京</option> <option value="">上海</option> <option value="">广西</option> <option value="" selected>西藏</option> <option value="">敦煌</option> </select> </p> <p> <!--cols:columns:列的意思--> <!--rows:行的意思--> <textarea cols="30" rows="10" placeholder="备注："></textarea> </p> <!--按钮--> <input type="button" value="我是一个普通按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> <button>h5按钮</button> </form>
10、表格元素 <table>
表格的行 table rows <tr>
表格的数据 table data <td>
|
td |
td |
td |
|||||||
11、html的字符实体
<body> <!--字符实体就是 用实际的字符来表示特殊的符号--> <!--< less than lt <--> <!--> great than gt >--> 今天好开心呀 因为我们学了<h1>标签 ©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号 （版本号） <p> <!-- non-breaking spacing 空格的意思--> 我看上 你好 久了 </p> </body>
12、class vs. id
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用
- id用途：实现跳转到指定位置、指定页面；
- JavaScript 可以使用
getElementById()方法访问拥有特定 id 的元素
(注：非原创，原作者：刘祥）