一个html的基本结构如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>网页标题</title>

    </head>

    <body>

          网页显示内容

    </body>

</html>

在sublime中打出  !  加 tab 键可以调出

html标题标签

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，

html块标签、含样式的标签

1、<div> 标签 块元素，表示一块内容，没有具体的语义。
2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义

1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多

html图像标签

<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

  • src属性 定义图片的引用地址
  • alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

  • “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

  • “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片

html链接标签

<a>标签可以在网页上定义一个链接地址，它的常用属性有：

  • href属性 定义跳转的地址
  • title属性 定义鼠标悬停时弹出的提示文字框
  • target属性 定义链接窗口打开的位置
    • target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
    • target="_blank" 新页面会在新开的一个浏览器窗口打

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现

18 12 23 html 基本学习的更多相关文章

  1. Navicat Premium 12.0.18 / 12.0.24安装与激活

    若使用Navicat Premium 12.1.8.0请转至Navicat Premium 12.1.8.0安装与激活,其实每个小版本更迭变化不大.另外最重要的是,请仔细阅读本文激活部分,总有一些人遇 ...

  2. [CareerCup] 18.12 Largest Sum Submatrix 和最大的子矩阵

    18.12 Given an NxN matrix of positive and negative integers, write code to find the submatrix with t ...

  3. mongo 杀掉慢的程序killMyRunningOps("12.23.32.21") #####这个是客户端的ip

    mongodb运维(3) db.currentOp与db.killOp命令 2018.08.12 23:55 113浏览  字号 好久没更新mongo运维这块知识了,这次介绍 db.currentOp ...

  4. C#6.0新特性：var s = $"{12}+{23}={12+23}"

    为什么会出现$符号,c#6.0才出现的新特性 var s = string.Fromat("{0}+{1}={2}",12,23,12+23) 用起来必须输入string.From ...

  5. 18 12 26 css 学习 选择器

    1.标签选择器 标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中.举例: *{margin:0;padding:0} div{color:red} <div>....</ ...

  6. 18 12 24 html 表单学习

    html表单 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 meth ...

  7. QVM 实操记 - 18.12.28

    视频回放地址:https://i.iamlj.com/mp4/QVM-IMC-12.27-1080P.mp4 目录 目录 常规开发部署流程 准备工作 开发准备 网站部署 操作步骤 重装系统 LANP环 ...

  8. Ubuntu18.04 + CUDA9.0 + cuDNN7.3 + Tensorflow-gpu-1.12 + Jupyter Notebook深度学习环境配置

    目录 一.Ubuntu18.04 LTS系统的安装 1. 安装文件下载 2. 制作U盘安装镜像文件 3. 开始安装 二.设置软件源的国内镜像 1. 设置方法 2.关于ubuntu镜像的小知识 三.Nv ...

  9. Ubuntu16.04 + CUDA9.0 + cuDNN7.3 + Tensorflow-gpu-1.12 + Jupyter Notebook 深度学习环境配置

    目录 一.Ubuntu16.04 LTS系统的安装 二.设置软件源的国内镜像 1. 设置方法 2.关于ubuntu镜像的小知识 三.Nvidia显卡驱动的安装 1. 首先查看显卡型号和推荐的显卡驱动 ...

随机推荐

  1. 编程题目： 找出最小的k个数

    找出最小或者最大的几个数我使用的是堆排序,效率为0(nlgn) 构建小顶堆返回末尾的k个数 或者 构建大顶堆返回前k个数 #!/usr/bin/env python3 def heap_sort(ar ...

  2. SQLyog连接报错 Error No.2058 Plugin caching_sha2_password could not be loaded

    参考链接:https://blog.csdn.net/qq_22766431/article/details/80628583 win10系统更新安装Mysql8.0,连接SQLyog的时候出现下面错 ...

  3. ROS大型工程学习（三） ROS常用命令行

    1.rosbag 对ros包进行操作的命令. (1)录制包: rosbag record -a //录制数据包,所有topic都录制 rosbag record /topic_name1 /topic ...

  4. JS写一个旋转木马的视频播放效果

    JS以及JQ的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...

  5. 016、MySQL取本年第一季度开始日期

    #取第1季度开始日期 SELECT date_add( dy, INTERVAL ( ) MONTH ) dy FROM ( ) dy ) x ; 效果如下: 不忘初心,如果您认为这篇文章有价值,认同 ...

  6. php phar反序列化任意执行代码

    2018年 原理一.关于流包装stream wrapper大多数的文件操作允许使用各种URL协议去访问文件路径,如data://,zlib://,php://例如常见的有include('php:// ...

  7. springboot - 在servlet中映射Errors 脱离spring mvc

    应用不用Spring MVC, 采用ErrorPageRegistrar 接口能直接映射errors. 1.概览 2.java代码 1).MyAppServlet package com.ebc.se ...

  8. 一道算法题加深我对C++中map函数的理解

    一.一道题目引发我对map函数的考量 首先是题目大意:有n个银行,a[i]表示这个人在第i个银行有a[i]块钱(可以是负数),所有银行的钱加起来正好是0.每次只能在相邻的银行之间转账,问最少要转多少次 ...

  9. js generator的两个实际应用

    generator作为一个用来操作异步的状态机, 遇到yield停止, 通过调用next()来继续操作.  今天就用generator来举例两个实际开发中的应用. 1,抽奖 function draw ...

  10. xv6 锁

    在xv6 中锁对象是 spinlock,spinlock中的locked为1的时候表示被占用,为0的时候锁空闲. struct spinlock { uint locked; // Is the lo ...