ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端学习—HTML [打印本页]
作者: 渣渣兔    时间: 前天 17:48
标题: 前端学习—HTML
前端学习
html概括

HTML布局标签订义网页内容
CSS样式设置，规定网页布局
JavaScript编程网页行为
HTML超文本标志语言，是一套标志标签，描述网页的
XHTML是以XML格式编写的HTML
HTML文档也叫web页面，由相互嵌套的HTML元素构成
对于中文网页需要使用<meta charset="utf-8">声明编码，有的欣赏器默认GBK编码
当表现页面时，欣赏器会移除源代码中多余的空格和空行。所有一连的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有一连的空行（换行）也被表现为一个空格。
html中只有一个单位像素，所以单位可以省略
<!-- 表明-->
HTML文档的后缀名 .html .htm
HTML的网页布局

只有body标签里<白色地区>才会在欣赏器表现
块级元素：表现时以新行开始和结束
内联元素：表现时不会以新行表现
html的表单用于收集用户的输入信息，表示文档的一个地区，将用户收集的信息发送到web服务器

html标签

<!DOCTYPE html> 声明html5文档
HTML标签是成对出现的，尖括号困绕 <开始标签>内容</结束标签>
某些标签是空内容，空元素在开始标签内举行关闭（以开始标签的结束而结束）比方<标签 />
大多数HTML标签具有属性，标签对大小不敏感，建议使用小写
<html>元素HTML页面的根元素
<head> 头元素，包含了文档的元数据
   html标签包含了所有的头部标签元素
  在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
  可以添加在头部地区的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
  <title>文档的标题
   定义欣赏器工具栏的标题，必需的
  <base>描述了基本的链接地址/目标，作为文档中所有链接标签的默认链接
<link>定义了文档与外部资源之间的关系,通常用于链接到样式表
<style>定义文档的样式文件引用地址，可以直接添加样式来渲染html文档
<meta>标签通常用于指定网页的描述，文件的最后修改时间，作者，和其他元数据，页面不表现
<script>加载js脚本文件
<body>文档的可见页面内容
<h1>...<h6>Html的标题
<p>Html段落,块级元素,欣赏器主动在段落前后添加空行
<a>Html的链接，在href属性指定链接地址 
   <a href="URL定义毗连目标"  target="定义链接打开方式" rel="定义链接和目标页面的关系">链接文本</a>
  target:
  
  rel:
          nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
           noopener 和 noreferrer: 防止在新标签中打开链接时的安全题目
           noopener: 防止新的欣赏上下文（页面）访问window.opener属性和open方法。         noreferrer: 不发送referer header（即不告诉目标网站你从那里来的)
  class：定义指定元素的类名，css定义
  style: 在元素上定义css样式
  url链接 请始终将正斜杠添加到子文件夹，否则会调用https两次
  <img> Html的图像，图像的名称和尺寸以属性的方式提供
   <img src="url" alt="some_text" width="304" height="228">
  url:图像地址
  alt:为图像预备不表现时可替换的文本
  width/height:默认单位为像素
  <table>表格：展示布局化数据
   tr:表格的行
  td:单元格
  th:表格的表头元素
  列表
   <ul> 无序列表，每个列表项始于 <li> 标签。ul的属性已废弃，使用css属性style
  <ol>有序列表，每个列表项始于 <li> 标签。
  <dl>自定义列表，而是项目及其表明的组合，每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
  <hr>标签在HTML页面创建程度线，分隔内容
<br>换行
<b>文本加粗 ， <i>文本倾斜
<div>块级元素，无寄义，用于文档布局，常与CSS连用对大的内容设置样式属性
<span>内联元素，无寄义，用于对部分文本设置样式属性
<form>元素创建表单
   <form action="表单提交的目标url" method="提交数据的http方法（post/get）"> </form>
  <label>元素为表单元素增加标签，提供可访问性
  <input >创建文本输入框、密码框、单选按钮、复选框等
  <input type="输入框范例" id="关联<label>元素" name="标识表单元素"> 
  <select> 创建下拉列表，<option> 定义下拉列表的选项
  表单本身是不可见的。而且注意一个文本字段的默认宽度是20个字符。
  <iframe >
   <iframe src="URL" width="200" height="200" ></iframe> url指向不同的网页，width/height定义标签的宽度和高度，单位为像素
  <script>定义客户端脚本
   <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件
  JavaScript 最常用于图片操作、表单验证以及内容动态更新。
  <noscript> 提供无法使用脚本时的替代内容，只有在欣赏器不支持脚本或者禁用脚本时，才会表现 <noscript> 元素中的内容：
  html5新增标签

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
   <canvas>标签只是图像容器，必须用 JavaScript 脚本来绘制图像
  Canvas 通过 JavaScript 来绘制 2D 图形。
  <svg>SVG图象的容器
   SVG可缩放矢量图象
  SVG使用xml模式2d图象的
  <math>数学标志语言
   基于xml标准，用来在互联网上书写数学符号和公式的置标语言。
  
属性

属性是html元素的附件信息，通常出如今开始标签中，定义元素的行为样式，name="value"的形式
全局属性：所有html都能使用的属性

id:为元素指定唯一标识符
class:为元素指定一个或多个类名，供css和js选择
style:直接在元素上使用css样式
title:为元素提供额外的信息，通常在鼠标悬停的时候展示
data-*:自定义属性（*为自定义变量），自定义数据，通常用于js读取
特定元素的属性：

href:（用于 <a> 和 <link> 元素）指定链接目标的URL
src:（用于 <img>, <script>, <iframe> 等元素）指定外部资源的URL
alt:（用于 <img> 元素）为图片提供替代文本，图片不表现时表现文本
type:（用于 <input> 和 <button> 元素）表现输入控件的范例
disabled（用于表单元素）：禁用元素，使其不可交互。
checked（用于 <input type="checkbox"> 和 <input type="radio">）：指定复选框或单选按钮是否被选中。
value（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。
placeholder（用于 <input> 和 <textarea> 元素）：在输入框中表现提示文本。
target（用于 <a> 和 <form> 元素）：指定链接或表单提交的目标窗口或框架。
布尔属性

不需要值的属性，存在为true，不存在为false
disabled禁用元素
readonly 输入框只读
required 指定输入字段为必填
autoplay（用于 <audio> 和 <video> 元素）：主动播放媒体。
变乱处置处罚属性

HTML 元素可以通过变乱处置处罚属性来响应特定的变乱，如点击、鼠标悬停等。
onclick:点击元素时触发
onmouseover:鼠标悬停时触发
onchange:元素值变化是触发


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4