Fork me on GitHub

Nots

一些名词

  • HTTP 超文本传输协议(HyperText Transfer Protocol)
  • TCP 传输控制协议(Transmission Control Protocol)
  • IP 网际协议(Internet Protocol)
  • HTML 超文本标记语言(HyperText Markup Language)
  • CSS 层叠样式表(Cascading Style Sheets)
  • URI 统一资源标识符(Uniform Resource Identifier)
  • URL 统一资源定位符(Uniform Resource Locator)
  • URN 统一资源名称(Uniform Resource Name)
应用层 HTTP
     ↓
  表示层
     ↓
  会话层
     ↓
传输层 TCP
     ↓
  网络层 IP
     ↓
 数据链路层
     ↓
  物理层

HTML 标签


  1. 注释标签
  2. br 标签 换行标签
  3. hr 分割线标签
  4. p 段落标签
  5. h1…h6 标题标签,一个界面最多一个h1标签,搜索引擎搜索问题
  6. font 文本标签
  7. html 标签,root标签,
  8. body 主体标签,给用户看的内容在这里面,浏览器也需看
  9. head head标签,只要是给浏览器看的内容
  10. title 标签标签,网站名称
  11. strong (文本标签 font 的加粗样式,也可以使用 b ,b只是简单的加粗,但strong有更好的着重意义,推荐使用 strong)
  12. em (文本标签 font 的斜体样式,也可以使用 i ,i只是简单的斜体,但em有更好的着重意义,推荐使用 em)
  13. del (删除线标签 也可以使用 s 推荐使用 del)
  14. ins (下划线标签 也可以使用 u 推荐使用 ins )
  15. a (超链接 title 提示文字)
  16. img (图片标签,可以设置加载失败的占位文字 提醒文字等 height width等,路径使用..表示到上一个文件夹)
  17. 锚点id 在标签中添加锚点,可以在超链接中设置点击超链接到指定的锚点
  18. 特殊符号 和OC中的转义字符一样,需要特殊处理,需注意下
  19. 列表 ul li 表示无序列表,type可以设置前面的图标类型
  20. 列表 ol li 有序列表,可以使用type设置编号类型 start表示从xx开始
  21. 列表 dl 自定义列表 dt标题 dd标签介绍
  22. embed 音乐标签
  23. marquee 滚动标签 文字(图片等)跑马灯自动滚动
  24. abbr 简写标签,在移动到此内容时,自动显示详细内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>

<html></html>

<head></head> 浏览器看的

<body></body> 主体 用户看的内容

<title></title> 网站标题

<p></p> 段落

<strong></strong> 强调加粗黑体,在阅读时会强调着用,b 只是简单的加粗黑体

<em></em> 着重 i也可以,建议使用 em

<abbr></abbr> 简写

<!----> 注释

<ins></ins> 下划线 u也可以

<del></del> 删除 s也可以

<h1></h1> 标题
<h6></h6> 标题

<br>换行

<hr> 分割线

<address></address> 作者信息

<font size="30" color="red">font </font>

<img scr="sss.png" width="100" height="200" alt="林志玲的图片" title="我是图片">
alt 加载失败时是提示文字 加强体验
title 提醒文本 鼠标移动到图片上时
height width 按照比例变化
路径问题 ../ 到上一家目录 目前在当前html文件的目录 开始寻找图片。


<a href="www.xxx.com" title="提醒文本"></a>
<a target="_parent"></a>
<a target="_blank"></a> 打开新的界面 当前界面不会关闭
<a target="_self"></a> 在当前界面打开,会覆盖调 默认
<a target="_top"></a>
在不知道具体到xxx界面时 href="#" 不需跳转 在当前界面就可以了,以后再补充具体怎么跳转。


锚点,可以让滚动到界面的指定位置
定义锚点
<p id="top"></p>
超链接点击就到锚点
<a href="#top"> 去顶部啊啊啊啊 </a>


特殊符号(转移字符需特殊处理下才可以 可以自行查看和补充)
空格 &nbsp;


列表
无序列表(没有重要区分)
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
type 表示前面的符号类型


有序列表(有重要区分 12345)
<ol>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ol>
type 1 A i .....
start 从xxx开始

自定义列表

<dl>
<dt>dt 小标题</dt>
<dd>dd 解释标题</dd>
</dl>

音乐标签
<embed src="1.mp3" hiden="true"></embed>

滚动标签 (可查看其他属性)
marquee

块标签

  • div p h1-h6 ul li
  • 不设置宽度时默认和父标签的宽度一样,而且会独立站一行。
  • 块转行 display:inLine
  • 块转行内块 display:inline-block

行内标签

  • span a strong em del ins
  • 连续布局,可以一行存放n个标签,自动布局。不可以自定义size,
  • 行转块 display:block
  • 行转行内块 display:inline-block

行内块标签

  • img input
  • 连续布局,可以一行存放n个标签,可以自定义size,

标签css的继承性

  • 必须是嵌套关系
  • 文字颜色 文字大小 文字粗细 整体样式 字体风格 行高 文字属性都可以继承
  • h1 可以继承文字大小,但会自动乘一个系数,所以看为不可以继承
  • a 链接 不可继承颜色color

css样式优先级

  • 默认 < 标签样式 < class < id样式 < 行内样式表 可以使用 !important 强制设置为重要
  • 继承的的优先级最低

CSS

  • HTML 结构

  • CSS 内嵌写法 / 外链写法

1
2
3
4
5
<style type="text/css">
...
</style>

<link rel="stylesheet" href="1.css">
  • JavaScript 内嵌写法 / 外链写法
1
2
3
4
<script type="text/javascript">
</script>

<script src="1.js"></script>
  • JavaScript 的几种调试方式
  • 1
    2
    3
    4
    5
    alert('ssssss'); // alert 确定按钮
    confirm('s'); // alert + 确定 和 取消按钮
    console.log('2'); // 控制台输出
    prompt('sss'); // 弹出一个用户输入框 搜集消息
    document.write('ssss') ; // 在页面输入内容
- END -
扫一扫上面的二维码图案,加我微信

文章作者:梁大红

特别声明:若无特殊声明均为原创,转载请注明,侵权请联系

版权声明:署名-非商业性使用-禁止演绎 4.0 国际