• 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

  • 相关阅读:
    node连接mysql数据库
    mysql重置密码
    CSS vertical-align 属性
    JS中常用的字符串方法
    JS中的常用数组方法
    获取下拉菜单中具有SELECTED属性元素的序号和值的方法
    基本的正则表达式符号
    让多个文本输入框左侧对齐方法
    CSS选择器权重对比
    让内联元素支持宽高的几个设置
  • 原文地址:https://www.cnblogs.com/Charles-H/p/Learning_HTML.html
Copyright © 2020-2023  润新知