[已收纳]HTML基础笔记

15195775117 · 发表于 2019-11-6 17:28:48

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 15195775117 于 2021-2-13 20:31 编辑

前端是web比较生动直观的部分，之前我学了下后端啊爬虫啊，完全一头雾水---我连前端有什么都不知道，后端就更不清楚了，所以我买了本厚厚的前端的书，准备啃下来。

越厚的书，内容越详细，学起来越容易，越快，很多内容一通百通后还会觉得教材啰嗦。

学会前端，只是时间问题，没有难度，结硬寨打呆仗即可。

-------------------------------------

静态网页，可直接预览，后缀：html或htm

动态网页，服务器解析后才能预览，后缀：asp、aspx、php、jsp

-------------------------------------

发展顺序：HTML4→XHTML→H5

-------------------------------------

属性用引号（单双都行）括起来。

<td nowrap=”nowrap”>用自身来赋值的表示属性无值

小于号是“<”大于号是“>”（与IDL类似）

-------------------------------------

简写规则：

对于元素area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr

写法为<area/>

对于元素li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th

结束标记可以省略

可以不写的：html,head,body,colgroup,tbody

15195775117 · 发表于 2019-11-6 17:37:15

模板案例：

该模板把简单的H5元素都演示了一遍，从文字排版都引用图片，设置超链接，等等功能
这些功能比较齐全，基本的word功能都有了，还有些word没有的，很赞！

<!DOCTYPE html>

<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<title>文档标题</title>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<hr>
<b>粗体</b>
<dfn>斜体</dfn>
<i>斜体</i>
<big>大文本</big>
<u>下划线</u>
<small>小文本</small>

<br></br>
<sup>上标</sup>
<sub>下标</sub>
<bdi>方向
<bdo>方向
<center>居中</center>
<font>字体</font>
<del>删除线</del>


<a href="http://tu.fengniao.com" accesskey="o" tabindex="1">Alt+o打开蜂鸟网</a>
<a href="http://bbs.06climate.com" tabindex="2" title="温馨提示">气象家园</a>

<img src="http://bbs.06climate.com/data/attachment/album/201901/16/143753vss0xsnebsspwwxg.gif" width="200" height="150" />
<img src="http://bbs.06climate.com/uc_server/avatar.php?uid=43007&size=middle" alt="替换文本" title="气象家园头像" />

<input type="image" src="C:\Users\Administrator\Desktop\不存在.jpg" alt="图片不存在" title="气象家园头像" />
<article>文章</article>
<header>标题</header>
<footer>脚注</footer>
<section>分段</section>
</html>

15195775117 · 发表于 2019-11-6 17:42:08

上一楼是容易实现的H5元素，还有些我没搞清的元素，等后面再做案例：

div：定义区域；

ol：按顺序列表；

ul：无序列表；

li：每条列表项；

dl：以定义的方式进行列表；

dt：列表中的词条；

dd：解释定义的词条；

ins：定义插入的文本；

p：段落结构；

span：行内包含框；

abbr：缩写词；

address：地址；

dfn：斜体；~<i>

kbd：键盘；

samp：样本；

var：变量；

tt：打印机字体；

code：源代码；

pre：预定义格式文本，保留源代码格式；

blockquote：大块内容引用；

cite：引文；

q：引用短语；

strong：重要文本；

em：文本为重要；

bdi+bdo：文本方向；

class：类；

id；

style；

lang：语言编码；

accesskey：访问某元素的键盘快捷键；

tabindex：元素的tab键索引编号；

rel：当前页面与其他页面的关系；

rev：其他页面与当前页面的链接关系；

section：分段；

article：独立内容；

header：标题栏；

footer：脚注栏；

nav：页面导航；

aside：注记、贴士、侧栏、摘要、插入等补充内容；

figure：组织多媒体资源，与ficaption联用；

dialog：对话，与dt、dd联用，dt表示说话者，dd表示说话内容；

meter：值；

time：时间；

process：进度条；

video：视频；

audio：音频；

datalist：组织详细内容并展示的元素（？），与summary联用；

datagrid：控制客户端数据的显示；

menu：交互菜单；

command：命令；

有些元素用CSS比较好，于是被取代了

CSS取代的元素：font、center、s、u

<a href=”XX.html” rel=”prev”>同级</a> 表示同级

15195775117 · 发表于 2019-11-6 17:52:08

web是个很好的工具，也是大趋势
网页也可以理解是一个GUI，集展示、交互于一体，功能齐全、强大
以前我一心想做个软件，网页无疑更好，而且网页能转exe

15195775117 · 发表于 2019-11-7 09:00:41

属性布尔值：true：1、写了属性，不赋值；2、属性名赋给属性；3、空字符串赋给属性。
false：不写属性。
总结：属性写了就是true了

15195775117 · 发表于 2019-11-7 09:47:26

元素与属性

以下的内容现在看起来一头雾水，但目前只是预热，等我把实例操作一下，这些就都明白了，完全不需要记

------------------------------------------------------------------------------

autofocus属性：自动获得焦点

使用其的元素：input(type=text)、select、textarea、button

placeholder属性：提示用户可以输入的内容

required属性：提交时检查元素内要有输入内容

使用其的元素：input(type=text)、textarea

form属性：声明属于哪个表单，将其放在表单之外

使用其的元素：input、output、select、textarea、button、fieldset

input元素有autocomplete、min、max、multiple、pattern、step属性

list元素与datalist元素配合使用

datalist元素与autocomplete属性配合使用

multiple属性允许一次上传多个文件

input元素与button元素的属性：formaction、formenctype、formmethod、formnovalidate、formtarget，可以重载form元素的action、enctype、method、novalidate、target

fieldset元素的disabled属性可将子元素设为无效状态

input、button、form元素的novalidate属性可取消提交时的检查，表单无条件提交。

a与area元素的media属性(href属性存在时使用)：规定URL是什么媒介/设备优化的

area的hreflang属性和rel属性：用来保持与a、link一致

link的sizes：与icon结合使用，指定图标大小

base的target属性：用来保持与a一致

ol的reversed属性：列表逆序

menu的label属性：定义一个可见的标注

menu的type属性：定义菜单的形式：上下文菜单or工具条or列表

style元素的scoped属性：规定样式的作用范围

script的async属性：是否异步执行

html的manifest属性：开发离线web应用时与API结合，在定义的URL上描述文档的缓存信息

iframe的sandbox、seamless、srcdoc属性：防止不信任的页面执行某些操作

15195775117 · 发表于 2019-11-7 10:04:28

元素编辑

contentEditable
这是个全局属性，所有元素都有的属性，可理解为“祖宗类”的属性

该属性还有继承状态，如果父元素可编辑，那子元素也可。

修改完将该元素的innerHTML发送到服务器端进行保存。（还不知道是怎么回事，记住就对了）

示例：

<li>不可编辑列表内容</li>

<li>可编辑列表内容1</li>

<li>可编辑列表内容2</li>

</ul>

15195775117 · 发表于 2019-11-7 14:44:13

contextmenu=上下文菜单=右键菜单，目前仅火狐浏览器支持

<div contextmenu="mymenu">上下文菜单/右键菜单
<menu type="context" id="mymenu">
<menuitem label="微信分享"></menuitem>
<menuitem label="微博分享"></menuitem>
</menu></div>

15195775117 · 发表于 2019-11-7 14:53:35

元素拖动：
<big draggable="true">可拖动</big>
这里支持拖（其他元素不支持拖，没有拖的特效），
但是松开鼠标后元素并没有走，可能还需要其他设置

15195775117 · 发表于 2019-11-7 15:01:06

元素隐藏：
<big hidden>不可见</big>
有时候元素不必全显示出来，用户进行了某些操作时才显示，元素的显隐可用JS设置hidden属性

		自动登录	找回密码
密码			立即注册