HTML学习
1 HTML Hyper Text Markup Language 超文本标记语言
2 html基本结构
<!DOCTYPE html> <!-- DTD document type definition 声明方式在HTML4中使用-->
<html lang="en"> <!---使用的语言 中文：zh-CN>
<head>
<meta charset="UTF-8"> <!-- 声明编码 有的需要声明为gbk 如360浏览器 -->
<title> the first html page</title> <!--网页标题-->
</head>
<body>
</body>
</html>
3 标签分类
双标签 eg:<html></html> <title></title> <body><body> <p></p> <h1></h1> <a></a>...
单标签 eg:<img /> <br /> <hr /> ...
标签关系：并列--兄弟关系 嵌套--父子关系
4 常用标签
标题标签 <h1></h1> ~<h6></h6> 赋予文字标题的含义，<h1>权重最高 语义化要注意
段落标签 <p></p>
格式化标签 <em><i> 让文字倾斜 <i>无语义 <em>有强调
<b><strong> 让文字加粗 <b>无语义 <strong>有强调
<s><del> 删除线
<em><strong>均是有语义，均意味着要呈现的文本是重要的
图像标签
<img src=" "> 通过src属性指定图像的位置，
img常用属性src--图片地址、 title--鼠标悬停文本、 alt--图片替换文本，其会在图片加载失败时显示、 width、 height
超链接
可以跳转到一个网址或本地的一个文件
<a href=" "></a> 通过href属性指定链接的地址；属性target="_blank" 会让链接在新的网页打开，默认是"_self“即当前页面；属性title=" "鼠标提示文本
图片链接<a href=""><img src=" "></a>
锚点 通过id 或name做个标记 用<a href="#id或name的value值"></a>实现
eg: <p id="p1">第1段 对于独立可操作的电子产品，固件一般指它的操作系统（“担任着一个数码产品最基础、最底层工作的软件才可以称之为固件”， 这和操 作系统的定义很一致）。比如PSP的固件，就是指PSP 的操作系统。同理，IPHONE的固件也是其操作系统，路由器的固件就是路由 器的操作系统，MP4的固件就是MP4的操作系统等。而对于非独立的电子产品，比如硬盘、鼠标、BIOS、光驱、U盘等设备，固件就是指其 最底层的，让设备得以运行的程序代码。
</p>
... ...
<a href="#p1">跳到第1段</a>
跨页面跳转在非html_hw.html中写：<a href="html_hw.html#p1">跳转到html_hw页面中的第一段</a> （
(即href="目标跳转页面路径#id/name的value值"）
列表标签
有序列表 <ol></ol> 无序列表 <ul></ul> 它们子标签必须为<li></li> ,<li>标签中可以放任何东西
自定义列表<dl><dt>列表项目</dt> <dd>列表项目描述</dd></dl>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
表格标签
表格有<table></table>标签来定义，每个表格有若干行<tr>，每行被分割为若干单元格<td> (table data 数据单元格的内容)
数据单元格的内容可以包含文本、图片、列表、段落、表单、水平线、表格...
<th></th> 表头单元格，默认让文本加粗，水平居中
<td></td> 默认水平居左 垂直居中
<table></table>相关属性：
border="1"有边框，不写默认无边框
width/height
cellspacing 单元格间距
cellpading 单元格内容与边框的距离
align="left" center/right
单元格相关属性：
width/height
align="left" center/right 水平方向
valign="middle" 垂直居中 垂直方向 top/middle/bottom
合并单元格 跨列 colspan 跨行rowspan
<table border="1" width="500" height="400" cellspacing="0" align="center" cellpading="10">
<caption>整个表格的标题</caption> <!--表格的标题-->
<thead> <!--如果不写出thead tfoot,则默认均放在tbody中 -->
<th>姓名</th>
<th>电话</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td colspan="2">1-2</td> <!--合并单元格1-2 1-3 跨列 colspan-->
<!-- <td>1-3</td> -->
</tr>
<tr>
<td valign="top" rowspan="2">2-1</td> <!--合并单元格2-1 3-1 跨行 rowspan-->
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- <td>3-1</td> -->
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
<tfoot>
<td>尾部</td>
<td>尾部</td>
<td>尾部</td>
</tfoot>
</table>
表单--用于收集不同类型的用户输入
<form>
input元素
</form>
常用表单输入元素为<input> 输入类型由属性type定义，常用输入类型为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!--文本框-->
<p>用户名：<input type="text"></p>
<!--密码框-->
<p>密码：<input type="password" name="" id=""></p>
<!--单选按钮-->
<p>性别: <input type="radio" name="sex" value="male" >男
<input type="radio" name="sex" value="female">女
</p>
<!--复选框-->
<p>擅长：<input type="checkbox" name="magic"> 数学
<input type="checkbox" name="magic">英语
<input type="checkbox" name="magic">语文
</p>
<!--下拉列列表-->
<p>
<select name="city" id="">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="chengdu">成都</option>
</select>
</p>
<!--文本域-->
<p>
理由:<textarea name="words" id="" cols="30" rows="10"></textarea>
</p>
<!--上传文件-->
<p>
<input type="file" name="resume"/>
</p>
<input type="hidden" name="">
<!--普通按钮-->
<p><input type="button" value="普通按钮"> </p>
<!--提交按钮-->
<p><input type="submit" value="提交"></p>
<!--重置按钮-->
<p><input type="reset" value="重置按钮"></p>
<!--图片提交按钮-->
<p><input type="image" src="../ddr.png" style=" 40px; height: 40px; "></p>
</form>
</body>
</html>
name表示表单元素名称，以后想携带数据到后台，必设置name
value 初始值，可获取用户输入的值
表示是否选中 checked --单选框 表示选中，checked="checked" 此时可以省略只写 checked; 也可以写checked="true"，只有属性名和属性值相同时可以省略
selected--复选框 表示选中，selected，用法同上
只读 readonly
不能被操作,且不被提交 disabled
布局标签
<div></div> 块级元素
<span></span> 行内元素
预格式化标签
<pre></pre> 保留原文本格式进行显示
特殊字符 小于号 < < 大于号 > > 版权 © 注册商标 ®
5 语义化的优点
1） 增强可读性；
2）利于团队协作；
3）利于SEO，搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重
4）html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
seo一般指搜索引擎优化。SEO（Search Engine Optimization)
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名