html概述和基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写。用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页。
html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
说明：“head”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“body”内编写网页上显示的内容。
快捷键：!+tab键
html 文档规范
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
5、html5可部分遵守，也可全部遵守，看开发要求。
html注释
快捷键：ctrl+/
html标签
在html语言中, 用尖括号括起来的部分, 我们称为标签.
有成对出现或者单个出现
<!-- 成对出现的标签 -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>
<!-- 单个出现的标签 -->
<br />
<img src="..." />
<input type="..." />
标签的分类
注意：元素即标签
标签按照显示的不同, 可以分为两类:
- 块元素 (行元素)
- 内联元素 (行内元素)
块元素的特点:
- 单个块元素在浏览器中默认独占一行
- 两个块元素不能够在一行显示, 他们会自动换成两行显示
- 块元素可以设置宽高等属性.
内联元素:
- 多个内联元素可以在一行显示
- 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
- 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
常用的块元素标签:
1. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.段落标签:
<p>
人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。
</p>
3. 通用块容器标签 div
可以把它当成一个容器
<div>这是一个div元素</div>
常用内联元素标签
1.超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
尖括号包裹的内容可以是文字或者图片
常用格式有下面几种：
<!--href属性值可以是一个html文件 链接到html文件body显示-->
<a href="02.html">第二个网页</a>
<!--href属性值可以是一个网页地址-->
<a href="http://www.baidu.com">百度网站</a>
<!--尖括号包裹的内容可以是一张图片-->
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<!--href属性默认值是#，可用于返回首页-->
<a href="#">默认链接</a>
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>
<a href="http://www.baidu.com" title="跳转到百度首页">百度</a>
说明:
- a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址
- 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
- 如果想要跳转到当前页面的最上方时, 可以使用 #
- a 标签有 target 属性
- 如果不设置该属性, 在当前页面打开新页面
- 如果设置该属性, 则会在新窗口中打开新页面
- 通过title属性定义鼠标悬停时弹出的提示文字框
- 通过 text-decoration: none; 可以设置去掉下划线
- 'text-decoration':'underline' 是设置下划线
2.通用内联容器标签 span
一般在文字段落的中间部分强调某一部分的时候用span
3. 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
<img src="images/pic.png" alt="图片">
说明:
- src属性主要是添加要展示的图片地址
- alt属性的作用:
- 图片加载失败时, 显示的提示信息
补充标签:
空格:在html中, 空格一般会用: 表示 7个 可表示大概两个汉字的缩进
回车: 在html中回车换行一般用<br>表示
小于号( < ):在html中一般用<表示
大于号( > ):在html中一般用>表示
删除标签: del
倾斜标签: em 行内元素
下划线标签: ins
绝对路径和相对路径
绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
html列表
前端中列表分为两种:
- 有序列表
- 无序列表
有序列表
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用
无序列表
<ul>
<li>列表标题</li>
<li>列表标题</li>
<li>列表标题</li>
</ul>
每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
list-style:none; /* 取消列表前面的序号或者是点 */
列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：
<ul>
<li><a href="#">列表标题 1</a></li>
<li><a href="#">列表标题 2</a></li>
<li><a href="#">列表标题 3</a></li>
</ul>
emmet 语法
.box>.box1+.box2
#page>div.logo+ul#navigation>li*5>a{Item $}
div#header+div.page+div#footer.class1.class2.class3
html表格
1、<table>标签
声明一个表格
2、<tr>标签
定义表格中的行
3、<td>和<th>标签
定义列以及列中的标题
td代表列，th表示列中的标题部分(加粗)
table常用属性：
1、border 定义表格的边框
2、text-align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
3、colspan 设置单元格水平合并 列合并
4、rowspan 设置单元格垂直合并 行合并 行列合并都是td 标签中的属性
5、 border-collapse 设置表格的边线合并，如：border-collapse:collapse; 这个是设置样式
6、border='1' 可以设置table的边框大小 table 属性
html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
使用方式:
<form action="" method="">
</form>
2、<label>标签 为表单元素定义文字标注
label 的 for 属性值可以和 input 的 id 名书写一致, 使 label 的点击也能够触发 input 的聚焦
使用方式：
label的使用方式:
<label for="">Male</label>
<label for="">Female</label>
3、<input>标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮 扩展：JQ中一般由form触发提交 默认是true (form.submit())
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名
使用方法:
<input type="text" name="username" placeholder="请您输入姓名">
<input type="password" name="password">
<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="0"> 女
<input type="checkbox" name="hobby" value="1"> 唱歌
<input type="file" name="file">
<input type="submit">
<input type="reset">
<input type="button" value="按钮1">
4、<textarea>标签 定义多行文本输入框
使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
textarea的使用
</textarea>
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
使用方法:
创建带有 4 个选项的选择列表：
<select name="province" id="">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">河南</option>
<option value="4">湖北</option>
</select>
页面嵌套
在一个页面中可以开一个局部的窗口，嵌入另外一个页面
制作这样的功能我们一般使用: iframe 标签来实现
使用方法:
<iframe src="" frameborder="">
</iframe>
- src: 设置另一个网页的地址
- frameborder: 设置这个局部窗口边框的粗细
iframe 可以和 a 标签搭配使用, 呈现切换的效果:
如果 target 的值和 iframe 的 name 值保持相同, 则 a 标签切换后的 href 将作用到 iframe 的 src 上：
<a href="001.html" target="name">001页面</a>
<a href="002.html" target="name">002页面</a>
<a href="003.html" target="name">003页面</a>
<iframe src="001.html" frameborder="0" name="name"></iframe>
网友评论