HTML 基础学习
前言：
HTML：(HyperText Markup Language)超文本标记语言，是 网页制作必备的编程语言
HTML的发展历程：
#
一.HTML标签
1、标题标签：h1-h6
h1代表1级标题，h6代表6级标题
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>
2.段落标签：p
p标签，缩写为(paragraph 段落） 会让包含在其中的内容成为一个段落
文本内容
3.水平线标签（单标签）
缩写为（horizontal 横线），为单标签，没有内容，/在hr后面的，会显示一条横线
或者
4.换行标签（单标签）
：单词缩写 break ，意为打断，换行。
的地方会换行
或者
5.div 和span 标签
div 使division 的缩写，分割区分的意思
span 跨度，跨距，范围
这两个标签是网页用来布局的2个盒子
文本内容文本内容2
6.文本格式化标签
文本格式化标签主要有4个
| <b></b> <strong></strong> | 加粗 | 推荐使用strong |
| <i></i> <em></em> | 倾斜 | 推荐使用em |
| <s></s> <del></del> | 删除 | 推荐使用del |
| <u></u> <ins></ins> | 下划线 | 推荐使用ins |
<b>加粗</b> <br><strong>推荐的加粗</strong><hr><i>倾斜</i> <br><em>推荐的倾斜</em><hr><s>删除</s><br><del>推荐的删除</del><hr><u>下划线</u> <br><ins>推荐的下划线</ins>
为什么推荐使用后者，因为两者都可以达到一样的效果，但是后者更符合XHTML的标准，既语义化
7.图片标签img
src是图片标签的必写属性
<img src="D:\media\1rr.png" alt="加载失败" title="周杰伦" width="400" border="13">
8.链接标签 a
a标签必须有href属性，链接地址必须加上协议，如http，ftp等
<a href="http://www.baidu.com">百度</a><a href="http://www.zhihu.com">知乎</a>
1.href属性详解：
href在意思是指定超链接目标的URL。在HTML和JSP页面代码里的作用是标签，其作用是插入一个超链接，“#”是默认当前页面，可以把#换成想跳转的页面。
我们经常看到 我的订单
href=”#“ 等于单独一个“#” 意思是链接当前页面。没有什么特殊意义。
通常有如下用法： 关闭 。
将href=”#“是指链接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。
扩展资料:
href=”URL”的作用
1、URL为绝对URL
此时指向另一个站点，比如href=”http://write.blog.csdn.net",那么点击时就会直接跳转到这个链接的页面。
2、URL为相对URL
此时指向站点内的某个文件，比如href=”/test.doc”，那么点击时就会直接下载文件。
3、锚点定位
当网页比较长时，点击该链接时，会跳转到网页某个位置
比如href=”#top”，那么点击时就会到当前页面中id=”top”的这个锚点,实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回 到页面中的某个部分的内容。
<a href="#tedian">1 个人特点</a><p id="tedian">个人特点非常鲜明，好学，认真，善良。。。。。。。。。。。。。。。。。。。。。。。</p>
#
9.base标签
base可以设置页面中的整体链接是以何种方式打开，base 位于head标签中
<head><meta charset="UTF-8"><title>Document</title><base target="_blank" /></head><body><a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.zhihu.com">知乎</a></body>
设置target=“_blank” 则是用新标签打开，而target=”_self”则是替换当前页面。默认不设置的话为_blanks
10.特殊符号
HTML中表示空格得用 这是比较常用的，如下图：
11.注释标签
12.列表
1.无序列表ul
ul 和li 配合使用，注意点有：
1.ul中只能放 li
2.li是一个容器，里面可以容纳任何元素
<h3>篮球明星</h3><ul><li>库里</li><li>乔丹</li><li>科比</li></ul>
效果：
2.有序列表
ol 和li 配合使用
<ol><li>库里</li><li>乔丹</li><li>科比</li></ol>
效果如下：
3.自定义列表dl
dl 和dt、dd配合使用，dt定义标题，dd 用来描述dt
<dl><dt>NBA</dt><dd>湖人队</dd><dd>勇士队</dd><dd>小牛队</dd></dl>
效果：
#
#
14.列表table
table不是用来布局的，最好用来做纯粹的表格
<table border="1" cellspacing="1" cellpadding="1"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>刘德华</td><td>男</td><td>29</td></tr><tr><td>周杰伦</td><td>女</td><td>16</td></tr></table>
th代表 header 表头。tr代表row，td代表一个单元格， tr只能签套td，但是td能放任何东西。
th表头会默认加粗和单元格居中
table的主要属性：
cellspacing 就类似margin，cellpadding就是padding
thead和tbody，这两个属性用于区分表头部分和表内容部分，实际上不显示。用于区分结构。如下：
<table ><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>刘德华</td><td>男</td><td>29</td></tr><tr><td>周杰伦</td><td>女</td><td>16</td></tr></tbody>< /table>
table中可以写caption标签，既标题，刚刚的th是表头，既列名，这个是标题，如下：
<table ><caption>演员表<caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>刘德华</td><td>男</td><td>29</td></tr><tr><td>周杰伦</td><td>女</td><td>16</td></tr></tbody>< /table>
合并单元格：使用rowspan 和colspan：
如下代码，演示rowspan：colspan同理
<table border="1" cellspacing="1" cellpadding="10"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>刘德华</td><td>男</td><td >29</td></tr><tr><td>周杰伦</td><td >女</td><td rowspan="2" >29</td></tr><tr><td>成龙</td><td>男</td></tr>
rowspan 和colspan 是从左往右，从上到下去扩展的。如上例中，删除的是成龙的29，而不是周杰伦的。
15.表单form
1.input 输入标签，单标签
可以用type来改变样式，可以是输入框，也可以是单选框，也可以是按钮。
<p>用户名: <input type="text"/> </p><p>密码: <input type="password"/> </p>
input标签的type和属性如下：
1.单选框radio，由name来决定是否为一组 ， 属性checked 来表示默认是否选中 如：
性别： <input type="radio" name="sex" checked="checked"> 男 <input type="radio" name="sex"> 女
2.按钮组，有button，submit，reset，image，file 等几个主要的
<!-- 普通按钮 --><input type="button" value="我是button按钮"><br/><br/><!-- 提交按钮 --><input type="submit" ><br/><br/><!-- 重置按钮 --><input type="reset"><br/><br/><!-- 图片按钮 --><input type="image" src="C:\33344.png"><br/><br/><!-- 选择文件按钮 --><input type="file"><br/><br/>
placeholder属性：
可以实现在输入框中显示浅色的文字，输入其他文字会覆盖，如：
<p>用户名: <input type="text" placeholder="zhangsan"/> </p><p>用户名2: <input type="text" value="zhangsan"/> </p>
3.label 标签：
label 元素不会向用户呈现任何特殊效果。但是当用户点击lable标记的元素时，会自动将焦点设置在该元素上。使用for属性来标记 配合id。lable是为了提升鼠标用户的焦点体验。如：
<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form>
4.文本域控件textarea:
可以输入多行文本,如：
<textarea name="" id="" cols="30" rows="10"></textarea>
5.下拉框控件select
option中定义 selected=“selected” 即为默认选中项
<select name="" id=""><option value="" selected="selected">选择城市</option><option value="">北京</option><option value="">上海</option><option value="">广州</option></select>
6.表单域
表单域就是form， 表单控件需要用form包括起来。如：
<form action="test.php" method="get" name="">用户名：<input type="text" name="username"><br/><br/>密码：<input type="password" name="pwd"><br/><br/><input type="submit" value="提交"><input type="reset"><br/><br/></form>
点提交的时候，因为method是get，所以会在链接中显示出属性。 post则不会
总结下HTML的单标签：
单标签就是由一个标签组成的。下面就是HTML中的单表签，其余的标签都是双标签
**
空格
横线
输入标签 图片
<link>
<embed>
<param>**
16.HTML5新增标签：
#
#
1.HTML5常见的标签：
" class="reference-link">
<header> 语义 :定义页面的头部 页眉</header><nav> 语义 :定义导航栏 </nav><footer> 语义: 定义 页面底部 页脚</footer><article> 语义: 定义文章</article><section> 语义： 定义区域</section><aside> 语义： 定义其所处内容之外的内容 侧边</aside>
#
2.datalist:选项列表，与input配合使用
<input type="text" value="输入地区" list="diqu"><datalist id="diqu"><option >浙江</option><option >南京</option><option >北京</option><option >南昌</option></datalist>
input标签用list属性绑定datalist的id，datalist本身并不显示
3.fiedset标签：意为字段的集合
可将表单内的元素分组，打包，与legend搭配使用，legend定义标题
<fieldset><legend>用户登录</legend>用户名：<input type="text"><br> <br>密码：<input type="password"></fieldset>
4.HTML5新增的input的type属性：
" class="reference-link">
5.meter 标签
H5新增的，用于度量给定范围内的数据：
<p>显示度量值：</p><meter value="10" min="0" max="100"></meter><br><meter value="0.7"></meter>
Internet Explorer 不支持 meter 标签。
6.多媒体标签
- embed：标签定义嵌入的内容
- audio：播放音频
- video：播放视频
约定不等于承诺〃
向右看齐
怼烎@
亦凉
╰+攻爆jí腚メ
我会带着你远行
还没有评论，来说两句吧...