HTML基本的认识
HTML(Hyper Text Markup Language):超文本标记语言
HTML是由标签所组成的语言,能展示超文本效果
基本框架:
1 <!DOCTYPE html> #这个是声明HTML5文件 2 <html lang="zh-CN"> #lang="zh-CN" 表示整个文档内容以中文为主,如果是英文,则改成lang="en" 即可
3 <head> 4 <meta charset="UTF-8"> #设置文档字符及编码格式,一般都选择UTF-8,因为UTF-8是万国码,基本兼容各国语言 5 <title>xxx</title> #网页的标题,就是显示标签页的内容 6 ......... 7 </head> 8 <body> 9 ....... 10 </body> 11 </html>
整个代码分为两部分:一部分是头<head></head>,一部分是身体<body></body>
头部主要进行处理,不展示内容。反之,身体部分主要展示网页展示的内容
注释: <!-- 注释内容 -->
常用标签:
一般情况下每个标签都有属性,每个属性里面都有参数
<head></head>内常用标签:
<title></title> # 定义网页标签 <style></style> # 定义内部样式表
<script></script> # 定义JS代码或引入外部JS文件 <link/> # 引入外部样式表文件 <meta/> # 定义网页原信息
在这里主要介绍一下 <meta/> 和 粗略介绍一下 <link/> 【其余的都会在后面遇到】
<meta/>标签:该标签可提供有关页面的元信息,针对搜索引擎和更新频度的描述和关键词
常见的属性:charset、http-equiv、name
(charset就不介绍了,基本框架有说)
http-equiv属性:需要配合content属性使用,主要声明浏览器如何解释编译文件
http-equiv参数:refresh 网页刷新 set-Cookie 设置浏览器cookie缓存 Content-Type HMT4之前的文档内容编码声明 x-ua-compatible 声明浏览器渲染
例子:<meta http-equiv="Content-Type" content="text/html charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
name属性:
写法:<meta name="属性值" content="属性值详细内容">
参数: author 作者,一般声明常用公司网址表示、keywords 网站关键字、description 网页描述,搜索引擎显示在title下的内容
<link/>标签:用于网页链接各种文件
属性:rel:用于表明被链接文件与当前文件的关系、type:表明被链接文件的类型、href:表明链接文件地址
说到路径地址这块,就不得不说说相对路径与绝对路径了;
绝对路径:简单来说就是你的主页上的文件或目录在硬盘上真正的路径
相对路径:相对于某个基准的目录的路径(../ 表示上层目录 ./ 表示当层目录)
在这两个当中推荐使用绝对路径,因为它安全。
<body></body>内常用标签:
<b>加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除</s>、<p>段落</p>、<h1>标题</h1> 【总共是 1-6】、<br>换行、水平线<hr>
<div>块标签</div>、<span>行内标签</span>: 这两个标签都是用来修饰CSS样式的 (区别:div适合大量信息展示、span适合少量信息展示)
<img>图片标签 具体写法:<img src="图片的路径" alt="图片未加载成功的提示" title="鼠标悬浮内容展示">
<a>超链接标签</a> 具体写法:<a href="路径" target="打开的形式"> 这里说说打开形式这个参数,总共有两个:1._blank在新标签页打开 2.在当前标签页打开
无序列表:
<ul type="xxx"> #type的参数:disc(默认,实心圆点)、circle(空心圆)、square(实心方块)、none(无样式) <li>xxx</li> <li>xxx</li> ..... </ul>
有序列表:
<ol type="xxx"> #type的参数:1(默认,数字列表)、A(大写字母)、a(小写字母)、I(大写罗马数字)、i(小写罗马数字) <li>xxx</li> <li>xxx</li> ........ </ol>
标题列表:
<dl> <dt>标题1</dt> <dd>内容</dd> <dt>标题2</dt> <dd>内容</dd> ......... </dl>
表格:
<table> <tr> <th>xxxx</th> # <tr>表示行 <th>表示格 先定行再定格 <th>xxx</th> ........... </tr> <tr> <th>xxxx</th> <th>xxx</th> ........... </tr> .............. </table>
有关表格属性:border:表格边框、cellpadding:内边距、cellspacing:外边距、width:像素百分比、rowspan:单元格竖跨行数、colspan:横跨行数
<form>表单标签</form>:拥有两个属性:action 表单所提交的服务器地址、method 提交方式【get/post】(这里推荐使用post,因为安全)
<input/>:属性:type 设置输入框的输入类型、name 给输入框命名(必不可少)、value 输入框默认值、placeholder 输入框提示内容、autocomplete 自动完成(例如:用户名)
type属性的参数:text 文本输入框、password 密码输入框、radio 单选框、checkbox 复选框、file 文件上传、submit 提交按钮、reset 重置表单数据、button 普通按钮、image 图形提交按钮
<select>定义一个选择框</select> <option>写选项</option>
例:
<select> <option value ="code">代码</option> <option value ="swim">游泳</option> <option value="dance">跳舞</option> <option value="run">跑步</option> </select>
<textarea>文本域标签</textarea> 本身没有value,参数值就是内容体
特殊符号: 注册商标 ® 版权标识 © (其他的就不介绍了,太多了,这两个比较常见)
以上就是HTML当中比较常见的标签了,虽然不是最具体的,但还是希望能对各位有所帮助。
加油!
时间:2020-03-18 01:10:57