标题一:HTML课堂笔记
文档结构说明(文档类型声明)
有7种文档类型
HTML4.0-4.1 strict,Transitional, Formset
html:xt/xs;对应严谨的或者不严谨的
严谨的HTML文档,可以丢一些东西,浏览器可以识别
XHTML1.0 strict,Transitional, Formset
严禁的HTML文档 所有的标记都要小写 一个符号都不能丢
HTML5
3.Sublimede的用法:
快捷键创建html(4.0-4.1-5)结构:html:xt,html:xs,html:5或者!+ tab;
a.不需要完整的输入一个标签,你只需要输入标签的名字,然后点击TAP键
b.Ctrl+鼠标滚轮:调整当前文档的显示字号大小
c.Ctr1+Shift+d:复制当前
d.Ctr1+Shift+k:删除当前行
e.标签名N 然后点击TAB键连续生成N个相同的标签
/遗漏一个知识点/
f.Ctr1+shift+↑/↓:上移/下移动当前行
h.按住滚轴不要去滚动它 往下拉
i.div>a>img 然后点击top <=>
<img src+"“alt+”"/>
k.li10>p>img 然后TAp键,end键可以直接到结尾
4.meta标签
a.声明当前页面所使用的字符串
<meta http-equiv=“Content-Type” content="text/
需要注意的是《一定要让你声明的当前网页所使用的编码格式与当前页面文件的保存格式一致,否则容易出现乱码
我们中文的世界里,目前才用的编码方式是:UTLF-8 GB2312
b <meta name="description" content=""/> 给网站添加描述信息,便于搜索引纤搜索
c. <meta name="keywords" content=""/>给网站添加搜索关键字
5.在body体里出现的html标签,可以分成两大类:容器级--div·文本级--span(文字 图片 表单元素)
6.a标签
注意:"~"符号在ASP.NET里表示当前网络的根目录。但是这个符号对于HTML的相对路径来说不管用的
a.标签的第二种用法:锚点
点击我的著作…我的著作
name属性是标准用法,id也可以达到相同效果
7.ul标签:unordered list无序列表,他是用来表示一组语义相同的项
ul标签和li标签是组成出现的.换句话说ul不能脱离li,li也不能脱离ul
ul里只能放li
li里可以放任何东西,甚至可以在li里嵌套ul(掌握横着放li的操作)
8.ol标签:ordered list有序列表。他是用来表示一组语义相关的项
ol和ul一样,必须跟li标签组成出现
一般情况下,既然ul和ol都表示一组语义相同的项,所以我们喝少用ol;
9:dl定义列表
dl:definition list
dt:definition title
dd:definition description
标题二:HTML涉及的基本标签:
在这里插入代码片(subline中的HTML基本框架省略都是写入到,<body> </body>
1.标题:
我是标题
<h1>我是标题</h1>
<h2></h2>.....<h5></h5>
2:段落;
<p> 我是段落</p>
3:直线:
<hr />(单向的)
4:换行:
<br />
5:文本格式化标签:
<b>咸蛋加粗</b> <=> <strong>加粗葱花蛋</strong>
我是<i>倾斜</i> <=> <em>脉动</em>回来
<s>原价:1888</s> 现价:19 <=> <del> 原价:1999</del> 现价:88
<u>特殊标志</u> <=> <ins>特殊标志</ins>一般都是用右边的
6:图片插入(分三部分:同级(在一个文件夹)插入,html在上一级与html在下一级:
最基本插入图片:
<img src="文件的名称以及格式" alt="如果图片没有显示出来则显示这一句话">(最基本)
<img src="文件的名称以及格式" title="当鼠标在图片上的时候显示这句话" width ="宽度" height=“高度” border="边框宽度">(最基本)高和宽一般指改变一个,一般图片都是比例存放。
/ / / / .../.../.../ 下一级与上一级表示方法
7:链接标签:
案例: <a href="http://www.baidu.com" target="_blank">百度</a>(需要网络)
<a href="连接的地址全名/其他的hteml文档/图片(本地不需要网络 网上的需要)/#" target="_blank">所创连接的名字</a>
target="_blank"作用点击对应的连接是不关闭原本网页,而是在另一个打开。
8:锚点定位:
<a href="#live">3生命含义</a> 这是锚头
<h3 id="live">生命含义:</h3>这是锚尾
<a href="#自定义地址名称">自定义名称a</a>
<h3 id="与锚头一致">
点击自定义a可以直接到对应的锚尾;id <=> name
9:div span:
<div>我是布局=我占满一整行</div>
<div>我是布局=我占满一整行i</div>
<span>我不限制我一行可以放多个</span>
<span>我不限制</span>
10:base标签
不是放到<body> </body>
<head>
<meta charset="UTF-8">
<title>无敌蛋蛋</title>/*网页名称*/
<base target="_blank" />
</head>
11.特殊字符(有很多可以自己去找,以后会补充)
<h3>------- 特殊字符 -------</h3>
我们的段落符号是:<p>段落</p>
12:注释标签
相当于C中/**/
<!--关于注释我有几点说的注释<br />-->
13:相对路径:
<h3>相对路径:</h3> <br />
<!--在一个文件夹-->
<img src="06.jpg" alt="这是大头贴">
<img src="imget/05.jpeg" />
<!--html文件在上一层-->
<img src="../前端案例/07 案例 .html" alt="">
<!--../表示上一级,一个就往上上一级-->
<h3>绝对路径:</h3><br />
1:本地<br /> <!--不经常用或者不用/!-->
2:网络(需要连接网络): <br /> <!--经常用-->
<img src="https://ps.ssl.qhimg.com/sdmt/203_162_100/t01f3d2dbeeea099a7b.webp" alt="#">
14:ul(无序表)与ol(有序表(一般不用))
<h3>你喜欢的水果:</h3>
<ul>盒子
<!--ul标签里只能放li标签,但是li标签里可以放别的/!-->
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>火龙果</li>
<li>蓝莓</li>
<li>樱桃</li>
<li>
<p><h3>水果蔬菜</h3></p><br />
<p>西红柿</p>
</li>
</ul>
<!--有序表/!-->
<ol>盒子
<li>美国</li>
<li>英国</li>
<li>中国</li>
<li>俄罗斯</li>
<li>鸭蛋</li>
<li>蛋蛋</li>
</ol>
15:自定义列表
<dl>盒子
<dt>北京</dt>要解释的名词放到<dt></dt>中
<dd>昌平</dd>解释的含义放到<dd></dd>中
<dd>通州</dd>
<dd>顺义</dd>
<dd>海淀</dd>
</dl>