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,参数值就是内容体

特殊符号: 注册商标 &reg   版权标识 &copy  (其他的就不介绍了,太多了,这两个比较常见)

以上就是HTML当中比较常见的标签了,虽然不是最具体的,但还是希望能对各位有所帮助。

                                                      加油!

                                                  时间:2020-03-18 01:10:57

原文地址:https://www.cnblogs.com/Charles-H/p/Learning_HTML.html