web前端——html

Atlantis_Qi

已于 2022-07-26 16:16:21 修改

阅读量201

点赞数 1

分类专栏： HTML 文章标签：前端

于 2021-09-13 17:56:56 首次发布

本文链接：https://blog.youkuaiyun.com/Atlantis_Qi/article/details/120260235

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

静态网页：无论何时何地访问，网页显示固定信息，只能通过修改源代码更新。（更新不方便，访问速度快）
动态网页：内容随着用户操作和时间不同而变化。（与服务器数据库进行实时的数据交换）。
XHTML：
h5中新增了data-*属性，data-之后的属性是开发者自定义的属性名称，里面可以放置想存储的数据，然后通过数据集dataset来使用
DHTML是HTML、CSS和客户端脚本的一种集成。
<canvas> 元素用于图形的绘制，通常是JavaScript来完成.
<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签
<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）
body标签的两个属性background和bgcolor，其中background只能写url表示背景图像,bgcolor写背景颜色

一、

1、

2、web标准

含义：由W3C和其他标准化组织制定的一系列标准的集合

结构标准：网页元素的整理分类，HTML,XML,XHTML
表现标准：网页元素的版式颜色大小，CSS
行为标准：网页模型的定义交互，DOM

3、HTML

超文本标签语言，通过HTML标签对网页的文本、图片、声音等内容进行描述。

4、CSS

5、JavaScript

6、浏览器

三大浏览器：IE、火狐、谷歌

IE：微软，IE内核（Trident内核）。
火狐：Gecko引擎（非IE内核），开发插件Firebug（web开发）。
谷歌：Blink内核，由开放原始码软件编写（WebKit和Mozilla）。

网页制作工具：Editplus、notepad++，sublime，Dreamweaver。

7、Dreamweaver

主要快捷键

ctrl+s：保存
ctrl+shift+s：另存为
ctrl+u：首选参数（重要设置）
F12：主浏览器运行
ctrl+F12：次浏览器运行
ctrl+o：打开文件

8、主要标签和属性

注释标签：
<font face="文本字体" size color>设置文本</font>
<div>经典块元素</div>
<span>内联块元素，文本容器，直接在css引用</span>
<a href="网站地址"/"#跳转到某name" target="_blank新网页打开" target="_self原网页打开">引用链接</a>
<img src="图片地址" width height alt="图片不显示时显示" title="触碰时文字" hspace="水平间距"/top/parent>图片</img>

<audio src="htmls/1.mp3" controls="controls"用户控制音乐 loop="loop"循环播放 preload="auto"自动播放 >音频</audio>

<video src="htmls/1.mp3" controls="controls"用户控制音乐 loop="loop"循环播放 preload="auto"自动播放 poster=“封面地址”>视频</video>

<p>段落</p>
<hr size="水平线粗细" color="颜色" width="宽度">一条分割线
<h1(h2)(h3) align="对齐方式">标题（字号由小到大）</h1(h2)>
<b>定义粗体文本</b>
<del>定义删除字</del>
<i>定义斜体字</i>
<body bgcolor="背景颜色">正文</body>
<marquee>滚动文字</marquee>
<em> 标签表示强调内容，显示为斜体，但不加粗文本
highlight jQuery中的，突出特效，通过改变背景颜色来隐藏或者显示一个元素
mark h5中的标签，定义带有记号的文本，文本高亮显示
strong HTML中的标签，定义重要文本，用来加粗文本
blink 是js中的方法，用于显示闪动的字符串，不能用于ie，Chrome，Safari。
<caption> 标签表示表格标题，标题一般被居中表格之上，但不加粗文本

9、meta标签

10、表格标签

<table border="框线" cellpadding="边距" color="填充色" backgound="填充背景"></table>
<ul type="disc" "circle" "square">·无序列表</ul>
<ol type="a" "A" "I" start="开始数字">有序列表</ol>

11、实体、特殊字符标签

12、图像格式

GIF：支持动画，支持透明，常用于logo、小图标和色彩简单图像，动态图片
PNG：体积小，不支持动画，支持透明，PNG-32（半透明），PNG-8（GIF）
JPG：颜色多，有损压缩，色彩丰富的图片。

13、表单form和input

<form action="web服务器URL／脚本所在文件夹／脚本名" method="数据发送方式(POST/GET)"> </form>

复选框：<input type="checkbox" name="同一组的单选"></input>

下拉列表：<select size="下拉菜单的可见选项数" multiple="multiple"（多项选择）> <option selected="selected"（当前项为默认选中项）>选项文本</option> </select>

带提示的文本框：datelist

（以下都是在form标签基础之下）

input:

<input type="text" name="控件的名称" size="控件的长度" maxlength="最长的字符数" value="文字域的默认取值" readonly disabled（只读，后者且不能提交）maxlength="控制字符数" placeholder="虚拟值" required：规定必需在提交表单之前填写输入字段>
type值：text、password（密码，字符被遮挡）、button（按钮，启动脚本）、CheckBox（复选框）、radio（单选按钮）、submit（提交按钮，发送数据）、reset（重置按钮）、url（网站地址）、date（日期选择器）、search（搜索栏）、time（时间选择器）、file（文件传输）、hidden、 range（范围）
size：size="控件长度
value：value="文字域的默认取值"

legend标签：为 fieldset 元素定义标题（caption）

fieldset 标签：将表单内的相关元素分组。

label标签：

关联其他组件。

textarea——多行文本输入框

14、框架（frame）

标签是一个内联窗口，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。

基本语法：<iframe src="文件路径"></iframe>

常见属性：

height、width、name、frameborder（边框）、scrolling=“yes/no/auto”（滚动条）

15、全局属性（默认true）

contenteditable="true"：（激活编辑器）可编辑。
designMode="on"/"off"：是否可编辑，js脚本下
hidden="true"：隐藏
spellcheck="true"：拼写检查
tabindex="1/2/3"：设置访问顺序

16、其他元素

article元素：文章，同div（可嵌套）

section元素：需要有标题（h1）

nav元素：导航的连接组

header元素、aside元素、footer元素：

time元素：把属于定义为时间格式，datetime属性中日期与时间需要用T来分隔，T表示时间；时间后面加上Z表示给机器编码时使用UTC时间标准；+号后面表示时差，如果是本地时间，则不需要加上时差。还有一个布尔值属性updata

17、其他属性