HTML语法大全

HTML语法大全

一、认识html

  • html:hypertext markup language,超文本标记语言,超链接(实现页面跳转);
  • html结构标准:
<!doctype html> //声明文档类型,由渲染引擎解析

<html>  //根标签

<head>  //头部标签,里面的内容是给浏览器/搜索引擎看的
    <title></title> //标题标签
</head>

<body>  //主体标签,给用户、浏览者看
</body>

</html>
  • html和htm是一样的;
  • 后缀名不能决定文件格式,只能决定文件打开方式;
  • html标签分类:
    • 单标签<!doctype html>;
    • 双标签<html></html>、<body></body>、<title></title>
  • html标签关系
    • 包含(嵌套):<head><title></title><head> 父子关系
    • 并列关系:<head></head><body></body> 兄弟姐妹关系

二、开发工具

  • Dreamweaver:历史悠久,偏设计师使用;
  • sublime:轻量级的,简单、好学,有好多好用的插件;
    • 常用快捷键:
html:xt + tab html结构代码
tab 补全标签代码
ctrl + shift + d 快速复制一行
ctrl + shift + k 快速删除一行
ctrl + 鼠标左键单击 集体输入
ctrl + h 查找替换
ctrl + f 查找
ctrl + / 注释
ctrl + l 快速选中一行
ctrl + shift + ↑(↓) 快速上移(下移)一行
查看->布局 设置行列
  • webstorm:很强大、很智能。

三、简单标签

单标签
  • 注释标签:ctrl + /
  • 换行标签:<br/>,在html5中可以省略/
  • 水平线标签:<hr />
双标签
  • 标题标签:<h1></h1>,取值是h1-h6,一个页面中只能有一个h1。
  • 段落标签:<p>段落内容</p>,特点:上下自动生成空白行;<br/>换行不会生成空白行;
  • 文本标签:<font size="16" color="red" >文本内容</font>,早期做网站时候使用;
文本格式化标签:
  • 加粗:<strong></strong><b></b>,工作中建议使用strong;
  • 倾斜:<em></em><i></i>,工作中建议使用em;
  • 删除线:<del></del>,<s><s/>,工作中建议使用del;
  • 下划线:<ins></ins>,<u></u>,工作中建议使用ins。
  • 建议使用的都是更具语义化,可读性更强。
图片标签
  • <img src="" alt="" title="提示文本" width="" height=""/>
    • src:图片的来源,必写属性;
    • 当鼠标放在图片上时显示title的内容;
    • 当图片加载失败时显示alt的内容;
    • 如果不设置图片宽高,显示图片默认大小,如果只设置其中一个,会进行等比例缩放,如果两个都设置就会按照设置的大小进行展示。
a标签(超链接)
  • <a href="" title="" target="">登录</a>

    • href存放目标页面的url,为必写属性;
    • 鼠标放在超链接上显示title的内容;
    • target为页面打开的方式,默认在原页面打开_self,如果设置值为_black,就会打开一个新的页面进行展示。
  • 锚链接

    • 首先定义一个锚点:在标签中添加一个id属性;
    • 超链接到锚点:<a href="#id属性名">跳转</a>

四、绝对路径和相对路径

  • 相对路径:相对于文件自身出发
    • 文件(html文档)和图片在同一个目录(文件夹),直接写文件名;
    • 如果图片在下一级目录里,src就为文件夹名+/+图片名称
    • 如果图片在上一级目录里,scr就是 ../ + 图片名
  • 绝对路径
    • 电脑上绝对路径:从电脑盘符开始,如F:\Documents\学习\前端学习\mage.png
    • 互联网上绝对路径:http://...
练习:
  • 四季

五、空链、压缩包下载、超链接的优化写法、特殊字符:

  • 空链:当不知道跳转链接时候使用:<a href="#">空链</a>

  • 压缩包下载,<a href="xxx/mage.rar">压缩包</a>,了解就行,工作中一般不会这样使用。

  • 超链接的优化写法, 让页面中所有的标签在点击时都打开新窗口:

    <head>
      <base target="_blank">
    </head>
  • 特殊字符:

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方(上标2) &sup2;
³ 立方(上标3) &sup3;

六、中级标签

列表标签
  • 无序列表

    <ul type="disc">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    • type可以取三个值,square样式为小方块、circle样式为空心小圆点、disc为实心小圆点(默认样式)。
  • 有序列表

    <ol type="1" start="3">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    • type可以更改标号样式,type可取的值为:1、a、A、i、I等,start设置从哪一个值开始依次往后排序。
  • 定义列表

    <dl>
      <dt>小标题</dt>
      <dd>解释标题<dd>
      <dd>解释标题<dd>
      <dd>解释标题<dd>
      <dd>解释标题<dd>
    </dl>
音乐标签
  • <embed src="" hidden="true" />,hidden设置为true时,隐藏音乐播放器,比audio标签多一块黑色的背景。

七、跑马灯:页面自动滚动效果

  • <marquee height="80" weight="200" bgcolor="red" behavior="alternate" direction="down">...</marquee>
    • 中间的内容可以是文字、图片,也可以是由程序生成的文字或图片;
    • behavior设置滚动的方式,alternate表示在两端之间来回滚动,scroll表示一端滚动到另一端(会重复),slide表示由一端滚动到另一端(不会重复);
    • direction设置滚动方向,down表示向下滚动,left向左,right向右,up向上;
    • loop表示滚动的次数,-1时无限滚动;
    • scrollamount设置滚动速度,值越大滚动速度越快;
    • 设置背景音乐等。

八、几种HTML结构的快速搭建

  • html:xt + tab,过渡结构;
  • html:xs + tab,严格结构;
  • ! + tab,html5标签结构

九、高级标签

meta标签
  • 编码格式,在meta标签里面设置charset,英语用ascll、ansi;日文、韩文用Unicode;中文的用gbk、gbk2312;台湾big5(繁体字符);utf-8支持180到200个国家语言,所以用utf-8基本能解析所有国家语言<meta charset="utf-8">
  • 关键字:给搜索引擎看,主要用于SEO,<meta name="keywords" content="阳光,帅气,有担当,进步">(逗号使用英语格式的);
  • 网页描述:在搜索的时候会出现的描述:<meta name="description" content="江苏是一个好地方,有山有人妹子水灵">
  • 网页重定向:<meta http-equiv="refresh" content="5;http://baidu.com">过5秒之后跳转到设定的页面;
  • 告诉搜索引擎站点的作者:<meta name="author" content="姓名">(不常用);
  • <meta name="robots" content="all/none/index/noindex/follow/nofollow">(不常用,了解):
    • all:文件将被检索,且页面上的链接可以被查询;
    • none:文件将不被检索,且页面上的链接不可以被查询;
    • index:文件将被检索;
    • noindex:文件将不被检索,但页面上的链接可以被查询;
    • follow:页面上的链接可以被查询;
    • nofollow:文件将不被检索,页面上的链接可以被查询。
link标签
  • 链接外部样式表文件<link rel="stylesheet" href="1.css">;
  • 设置网站icon:<meta rel="icon" href="xxx.png">
表格标签
  • 展示数据,是对网页重构(css+div)的一个有益补充 ;
  • 属性:
    • 边框属性:border;
    • 表格大小会根据内容自动进行填充,也可以自己设定;
    • 单元格之前的距离:cellspacing,默认值为2;
    • 内容和边框的距离:cellpadding;
    • 对齐方式:align,有三个值:left/right/center,如果给表格设为center,表格居中;如果给tr设置center,一行的内容居中;如果给td设置center,则某一列的内容居中,优先级:td > tr > table
  • 两行三列表格:创建表格可以用快捷方式table>tr*2>td*3

    <table border="1" bordercolor="red" width="400" height="200" cellspacing="0" cellpadding="5" align="center" bgcolor="orange">   //表格
      <tr align="center">     //行
          <td>张珊</td>   //列
          <td>24</td>
          <td>工程师</td>
      </tr>
    
      <tr>
          <td align="center">张珊</td>
          <td>24</td>
          <td>工程师</td>
      </tr>
    </table>
  • 表格完整结构:表格拥有完整结构会对SEO更友好,但是没有的话也不要求,在thead等里面设置属性不管用,需要在对应的tr或者td中设置

    <table>
      <thead>
          <tr>
              <td>标题</td>
              <td>标题</td>
              <td>标题</td>
          </tr>
      </thead>
    
      <tbody>
          <tr>
              <td>数据</td>
              <td>数据</td>
              <td>数据</td>
          </tr>
          <tr>
              <td>数据</td>
              <td>数据</td>
              <td>数据</td>
          </tr>
      </tbody>
    
      <tfoot>
          <tr>
              <td>数据</td>
              <td>数据</td>
              <td>数据</td>
          </tr>
          <tr>
              <td>数据</td>
              <td>数据</td>
              <td>数据</td>
          </tr>
      </tfoot>
    </table>
  • 给表格添加标题:

    <table >
      <caption>表格名称</caption>
      <tr>
          <td>张珊</td>
          <td>24</td>
          <td>工程师</td>
      </tr>
    
      <tr>
          <td>张珊</td>
          <td>24</td>
          <td>工程师</td>
      </tr>
    </table>
  • 单元格合并

    • 同一行的单元格合并:

      <table >
      <caption>表格名称</caption>
      <tr>
          <td colspan="2">张珊</td>
      
          <td>工程师</td>
      </tr>
      
      <tr>
          <td>张珊</td>
          <td>24</td>
          <td>工程师</td>
      </tr>
      </table>
    • 同一列单元格合并:

      <table >
      <caption>表格名称</caption>
      <tr>
          <td>张珊</td>
          <td>24</td>
          <td rowspan=“2”>工程师</td>
      </tr>
      
      <tr>
          <td>张珊</td>
          <td>24</td>
      
      </tr>
      </table>
  • 设置列标题:th,会将内容加粗,居中显示

    <table >
      <caption>表格名称</caption>
      <tr>
          <th>一月份</th>
          <th>二月份</th>
          <th>三月份</th>
      </tr>
    
      <tr>
          <td>张珊</td>
          <td>24</td>
          <td>工程师</td>
      </tr>
    </table>
  • 垂直方向对齐方式:valign=”top/middle/bottom”;
  • 细线表格:设置border=”1”时,其实单元格之间的线的宽度是2。设置细线表格的思路:设置表格背景色,然后再设置cellspacing=”1”。
    • 练习:可以试一下建课程表
表单标签
  • 输入信息,收集信息;
  • 表达组成:提示信息、表单控件(输入框)、表单域;

    <form action="xxx" method="get/post">
      用户名:<input type="text" name="username">
      密码:<input type="password" name="pwd">
      <input type="submit">
    </form>
    • action:处理信息;
    • method:有两个值可取,get和post。get:通过地址栏提供(传输)信息,安全性差;post:通过xxx来处理信息,安全性相对较高。
  • 文本输入框

    • <input type="text" maxlength="8" readonly="readonly" name="username" value="jiangjiang" placeholder="请输入用户名">
      • maxlength:设置输入的最大字符长度;
      • readonly:设置输入框为只读状态;
      • value:设置默认值;
      • placeholder:提示用户进行操作
    • <input type="text" maxlength="8" disable="disable" name="username">
      • disable:输入框没有激活;
      • name:给输入框设置名字,以便进行区分;
    • <input type="password" maxlength="8" disable="disable" name="username">
      • 密码输入框:输入的信息会变成暗文,文本输入框的所有属性对密码输入框都有效;
  • 单选框

    • <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女
      • 一组单选按钮必须要设置同样的name,否则单选无效;
      • 通过checked来设置默认选中项;
  • 多选框

    <input type="checkbox" name="hobby" checked="checked">喝酒
    <input type="checkbox" name="hobby">抽烟
    <input type="checkbox" name="hobby">烫头发
  • 多行文本框
    <textarea cols="30" rows="10"></textarea>

    • cols:控制输入字符的长度;
    • rows:控制输入的行数;
  • 文件上传控件
    <input type="file">

  • 按钮

    • 提交按钮:可以实现信息提交<input type="submit">;
    • 普通按钮:不能提交,通常配合js使用<input type="button" value="普通按钮">
    • 图片按钮:可实现信息提交功能<input type="image" src="xxx.jpg">;
    • 重置按钮:将信息重置到默认状态<input type="reset">
  • 将表单信息分组

    • 将表单内一组的内容放到<field></field>中,表单名称放到<legend></legend>
      <form action="xxx" method="get/post">
      <fieldset>
          <legend>个人信息提交</legend>
          用户名:<input type="text" name="username">
          密码:<input type="password" name="pwd">
          <input type="submit">
      </fieldset>
      </form>
  • 表单的其它控件

    • 网址输入框:<input type="url">,会要求输入正确的网址格式,但是空也可以提交,以后会用js进行判断;
    • 日期控件:<input type="date">
    • 时间控件:<input type="time">
    • 邮件控件:<input type="email">,要求输入正确的邮件格式,但是空也可以提交;
    • 数字控件:<input type="number" step="2">,有一个上下的小三角,可以步进,每次调整的值的大小为2;
    • 滑块控件:<input type="range" step=20>
下拉列表
  • 普通下拉列表

    <select multiple="multiple">
      <option>下拉列表选项1</option>
      <option>下拉列表选项2</option>
      <option selected="selected">下拉列表选项2</option>
    </select>
    • multiple:设置多选;
    • selected:设置默认选中项,如果不设置,默认选择第一个选项;
  • 分组下拉列表:

    <select>
      <optgroup label="江苏">
          <option>苏州</option>
          <option>无锡</option>
          <option>常州</option>
      </optgroup>
      <optgroup label="浙江">
          <option>杭州</option>
          <option>温州</option>
          <option>绍兴</option>
      </optgroup>
    </select>
概述详细信息标签
<details>
    <summary>简介</summary>
    发动机卡拉的交罚款了打飞机考虑到九分裤了打手机发开发阶段
</details>

十、标签语义化

  • 标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化);
  • 标签语义化意义:
    • 网页结构合理;
    • 有利于SEO和搜索引擎简历良好沟通,有了良好的结构和语义,你的网页内容自然容易被搜索引擎抓取;
    • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备);
    • 便于团队开发和维护。
  • 好的语义化的网站标准:去掉样式表文件之后,结构依然很清晰。
  • 标签语义化的注意事项:

    • 尽可能少的使用没有语义的标签div和span;
    • 在语义不明显时,既可以使用div或者p时,尽量使用p,因为p在默认情况下有上下间距,对兼容特殊终端有利;
    • 不要使用纯样式标签,如:font、b、i、s、u等,改用css样式;
    • 需要强调的文本,可以包含在strong或者em标签中,strong默认样式是加粗(不要用b),em是斜体(不用i);


展开阅读全文

没有更多推荐了,返回首页