html基础--基础标签
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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定义,常用输入类型为:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="width: 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)
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名