前端开发文档-HTML篇

Posted 2021-04-04 十斤代码

HTML元素

元素分类

块级元素：div、h1-h6、hr、menu、ol、ul、li、dl、dt、dd、table、p、form

含义：块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建

1. ‍独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布

2. 可以直接控制宽度、高度以及盒子模型的相关css属性(width/height/border/margin/padding)

3. 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

4. 在不设置高度的情况下，块级元素的高度是它本身内容的高度

5. 可以嵌套其他元素

6. ul li、ol li 、dl dt dd 成组出现，p标签不能嵌套它自己本身

‍

标签	作用
div	常用块级容器，也是css layout的主要标签
h1-h6	标题
hr	水平分隔线
menu	菜单列表
ol、ul、li	有序列表、无序列表、列表项
dl、dt、dd	定义列表、定义标题、定义描述
table	表格
p	段落
form	交互表单

内联元素：span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub

行内(内联)元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建.

• 和其他内联元素从左到右在一行显示,从左到右，达到父级元素的最大宽度时，会自动折行

• 不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的

• 内联元素的宽高是由本身内容的大小决定（文字、图片等）

• 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

• 在编辑代码时，元素之间有回车或者换行的时候，元素和元素之间有间隙

行内块级元素：textarea、input、img

• 在一行排布，从左到右，达到父级元素的最大宽度时，会自动折行

• 设置盒子模的CSS属性

• 默认不设置宽度和高度的时候，宽高都是由本身内容决定的

• 在编辑代码时，元素之间有回车或者换行的时候，元素和元素之间有间隙

语义化标签

语义化标签

语义化的标签，旨在让标签有自己的含义。p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签则没有独特的含义。

1. 尽量减少使用无意义标签，如span和div

2. 尽量不使用标签本身的CSS属性，如b、font、s

3. 需要强调的部分，使用strong、em

4. 表格搭建时，使用<thead>表格头部</thead>、<tbody>表格主体</tbody>、<tfoot>表格尾部</tfoot>

5. 列表搭建时，使用<ul>无序列表</ul>、<ol>有序列表</ol>、<dl>定义列表</dl>

新增标签的兼容问题

• html5语义化标签在IE6-8下，默认当成行内元素展示。

• 通过引入js解决IE9以下新增标签的兼容问题

Forms

• 新增input元素的种类：

• search：搜索输入框

• email：邮件输入框

• number：数字输入框

• rang：特定范围内的数值选择器

• color：颜色选择器 只在Opera和Blackberry浏览器

• datetime：显示完整日期和时间 UTC标准时间

• datetime-local：显示完整日期和时间

• time：显示时间

• month：显示月份

• week：显示周

<form> <input name="email" type="email" /> <input name="url" type="url" />   <input name="num" type="number" />   <input name="range" type="range" min="1" max="10"/> <input type="submit" value="提交"/></form>

表单新特性：

• placeholder：输入框占位符，用作输入提示

• autocomplete：是否保存用户输入值，默认为on，关闭为off

• autofocus：自动聚焦<input autofocus>

  autofocus 属性是一个布尔属性。autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。

  注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 autofocus 属性。
  

• required：此项必填，不能为空

• pattern：正则验证 <input type="number" pattern="d"> 

  注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。
  

• form：加上form属性，表单元素可以放在页面的任意位置

  然后只需要将这个从属元素的form属性指定为表单的ID，切记，在使用时，必须引用所属表单的ID

<form action="#" method="post" id="form1"> <input type="tel" autofocus/> <input type="button" value="提交"> </form><input type="text" placeholder="请输入你的名字" form="form1"><!-- 这个主要是说明了HTML5的新属性，以前的form表单的控件必须要在form的双标签之内，现在的话，不用了，我们可以脱离form的双标签在别的地方写控件了，只要在控件的末端加上主要的form表单的ID就可以了，如上面的form = form1。-->

• formnovalidate/novalidate：

• 表示不需要验证表单，直接提交（novalidate用户form标签）

• formnovalidate用于submit类型的提交按钮

  
  

SVG指南

SVG指南

简介

SVG是在XML中描述二维图形的语言。这些图形由路径，图片和文本组成，并能在不失真的情况下任意变换尺寸。

把SVG插入到项目：内联、img、background-iamge、<object>或者Data URI。

基本图形

SVG包含基本形状元素集：矩形，圆形，椭圆形，直线，折线和多边形。

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 <rect>

• 圆形 <circle>

• 椭圆 <ellipse>

• 线 <line>

• 折线 <polyline>

• 多边形 <polygon>

• 路径 <path>

矩形

<svg>    <rect width="300" height="200" fill="#ccc"></rect></svg>//其他属性x和y坐标，rx和ry属性创建圆角。

圆形

<svg> <circle cx="75" cy="75" r="75" fill="#bbc42a"></circle></svg>

椭圆

<svg> <ellipse cx="100" cy="100" rx="100" ry="50" fill="#bbc42a"></ellipse></svg>

直线

<svg> <line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"></line></svg>

折线

• points:属性里定义了各个点的坐标，x和y坐标之间用逗号分别，多个坐标之间用空格分割

• fill：填充颜色(画折线一般把属性设置为none)
  

• stroke：边框颜色
  

• stroke-width：边框宽带
  

• ill-opacity：透明度
  

• stroke-opacity：边框的透明度

<svg version="1.1"> <polyline points="120,120 120,80 160,80 160,40 200,40"style="fill:white;stroke:#68f;stroke-width:2"/></svg>

多边形

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/></svg>//points 属性定义多边形每个角的 x 和 y 坐标

路径

<svg version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /></svg>//开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径

未完待续.....

回复“领取前端电子书”，可领取~~~