标签:程序 后台 表达 option inpu 练习 cimage hot check
要知道网址的含义:http://www.iqianduan.cn/aaa
请求哪个文件?
请求的是iqianduan.cn服务器上的aaa文件夹中的index.html文件。拓展一下,服务器可以进行默认页面的配置,比如配置为default.html或者default.php等等。但是默认的是index.html。
HTML页面是真正的传输到了你的电脑里面进行渲染的,保存这些文件的文件夹,临时文件夹。
纯文本: 只有字,没有样式。txt、html、java、php、css、js等等。能用记事本打开,并且打开之后不是乱码的,就是纯文本文件。
HTML是负责描述语义的 : <h1>我是一个主标题</h1>
功能是给文本增加“主标题”的语义,而不是变大黑粗。
p的功能是增加“段落”的语义。
Sublime使用: 任何的纯文本编辑器都能编辑网页html文件。学习的是编程,而不是某种软件。
<!DTD>
<html>
???<head>
???</head>
???<body>
???</body>
</html>
XHTML1.0明确的规定了标签名必须小写、所有的属性都是双引号封闭、自封闭结尾反斜杠。
strict : 严格版本,font、b、u、i等不能使用了。
<b>加粗文字</b>
<u>下划线文字</u>
<i>倾斜文字</i>
2007年之前,就是用这些标签写页面的。但是,2007~08就被废弃了,原因是:DIV+CSS,
我们希望HTML标签只负责语义,而不要负责样式。而b、u、i明显的带有“样式色彩”,所以08年开始,就被废弃了。strict版本中,严格不需使用b、u、i。但是,我们要在页面上巧妙的使用一下b、u、i(css钩子),所以我们使用transitional版本。
<meta name=”keywords” content=”手机,电脑” />
<meta name=”description” content=”页面描述” />
空白折叠现象 和 HTML标签对空格、tab、换行不敏感。
h标签和p标签
h标签系列,一共6个
<h1></h1>
到
<h6></h6>
p标签,段落语义。
所谓的“容器级”和“文本级”不是官方的分类,而是有经验的程序员自己分出来的类别。
有一些标签,里面什么都能放置,非常的大气; → 容器级
有一些标签,里面只能放置文本,虽然放置别的东西,浏览器可能不报错,但是也没人这么做。 → 文本级
记住:HTML4.01层面,容器级标签,只有div、li、dd、dt、td。其余的标签,都是文本级的。
在HTML页面中要插入图片,使用img标签。
<img src="shishi.jpg" />
img是英语image的简称,图片的意思
src是英语source的简称,资源的资源
src属性中的值,就是图片的路径。
img标签是一个自封闭标签,也称为单标签,并不是一对儿。
<img />
我们现在接触的自封闭标签就两个:
<meta />
和<img />
网页中能插入的图片格式:jpg、jpeg、png、bmp、gif。 不能插入的图片格式:psd
不设置宽度、高度:
<img src="shishi.jpg" />
通过width设置宽度、height设置高度:
<img src="shishi.jpg" width="500" height="300" />
昨天学的语法,键值对:
<img k=”v” k=”v” k=”v” />
如果我们仅仅设置其中一个属性,另一个属性将按比例自动设置。
<img src="shishi.jpg" width="100" />
图片img元素,不是普通的html标签,和p这种东西不一样,img标签实际上也是一个文字。
img标签,就是文字:
<body>
???<img src="shishi.jpg" alt="" />
???<img src="shishi.jpg" alt="" />
???<img src="shishi.jpg" alt="" />
</body>
去掉空格:
<img src="shishi.jpg" alt="" /><img src="shishi.jpg" alt="" /><img
src="shishi.jpg" alt="" />
img的src属性,描述图片文件在哪儿。
从html页面出发,找到图片。这种路径的描述方式,叫做相对路径。
当html文件和图片文件在同一个目录下,那么非常简单,可以直接输入文件名<img src=”shishi.jpg” />
当图片在更深一层的文件夹中的时候:
写法就是写上文件夹名字:
<img src="images/longlong.jpg" />
可以有很多的层次:<img src="images/aaa/bbb/1.jpg" / >
如果图片在页面更浅一层的文件夹中:<img src="../jiehunzhao.jpg" />
路径可能比较复杂,没有关系一层一层找就可以了:
<img src="../../images/aaa/bbb/1.jpg" />
需要注意的是:??** ../只能出现在开头**。
所有以http://开头的路径, 或者以/开头的路径,我们都称为绝对路径。
<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" />
注意http:// 不能省略。
很明显,我们现在不是从html页面出发找到图片,而是描述了一个绝对的一个网址,那么称为“绝对路径”。
以/开头的路径,表示当前服务器的根目录。
<img src=”1.jpg” />
不等价于:<img src=”/1.jpg” />
解释:
<img src=”1.jpg” />
表示从当前页面出发,找到1.jpg。
<img src=”/1.jpg” />
表示从当前服务器根目录出发,找到1.jpg
等价于绝对地址:
<img src=”http://www.shaoshanhuan.com/images/1.jpg” />
不要去考虑直接插入硬盘中的文件:
<img src=”file://d:/1.jpg” />
不要学,没有用,因为服务器上没有d盘,你的路径不适用服务器的情况。并且也不方便用u盘考来考去。这是一个错误的路径。
看一道面试题,腾讯2014校园招聘笔试题:
img src=”../../photo/1.png” />
<img src="sdf34.jpg" alt="这是一只考拉" />
alt是英语alternate替代的意思,就是当图片不能被显示的时候(可能因为路径错误、服务器错误),显示的替代文字:
超级链接,把网页和网页之间连起来了,互联网是“网”的原因。
使用a标签来制作,a是英语anchor锚的意思。
<a href="temp.html">我是超级链接</a>
href是英语hypertext reference超文本地址的意思。
类似于img的src。
一定不要写成herf。所以你就要读做“何瑞福”,不要读作“喝er夫”。
href里面的值,就是要跳转到的页面的地址,相对路径、绝对路径都行:
<a href="../../aaa/bbb/ccc/1.html">链接</a>
<a href="/1.html">链接</a>
<a href="http://www.sina.com.cn/">链接</a>
<a href="temp.html" title="快点我,还等什么!!">我是超级链接</a>
target属性,设置是否在新窗口中打开连接,如果想在新窗口中打开链接? target=”_blank”
<a href="temp.html" target="_blank">我是新窗口打开的链接</a>
可以通过下面的这种特殊形式的a,在页面中放置锚点:
<a name="hysh"></a>
a里面有一个name属性,name是英语名字的意思。而没有href和链接中的文字。
这种a标签叫做锚点。
可以使用网址:
10_页面内锚点.html#hysh
来快速定位这个锚点。注意看下图的地址栏最后的部分:
可以在页面的其他部分,制作跳转到这个锚点的超级链接:
<a href="#yysy">查看演艺生涯</a>
甚至,可以在其他页面制作这个超级链接:
<a href="10_页面内锚点.html#yysy">查看演义生涯</a>
最后说一下,如果我们想要把一个段落中所有的文字,都是超级链接:
应该p包裹a,因为我们感觉p比a大,a就是一个文字:
<p>
???<a href="">我是段落的文字</a>
</p>
而不要:
<a href="">
???<p>我是段落的文字</p>
</a>
列表有三种
<ul>
<li>百度</li>
<li>百度</li>
<li>百度</li>
<li>百度</li>
</ul>
ul是英语unordered list,无序列表。表达的是没有顺序关系的列表。
li是英语list item列表项的意思。
这是我们学习的第一个组合的标签:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul的儿子标签,只能是li,不能是别的东西:
错误:
<ul>
<p></p>
<p></p>
<p></p>
<p></p>
</ul>
错误:
<ul>
???<h3>中国著名城市</h3>
???<li>北京</li>
???<li>上海</li>
???<li>广州</li>
</ul>
正确的:
???<h3>中国著名城市</h3>
<ul>
???<li>北京</li>
???<li>上海</li>
???<li>广州</li>
</ul>
错误的:
<ul>
中国著名城市
???<li>上海</li>
???<li>广州</li>
</ul>
li的数量没有限制,可以有无限多个。
li是一个非常经典的容器级标签,里面可以防止任何东西,甚至,再放置一个ul(二级列表),甚至三级列表。
注意下面的正确写法(这个案例想写对,真的不容易):
<body>
<ul>
<li>
<h4>直辖市</h4>
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>
<h4>广东省</h4>
<ul>
<li>广州</li>
<li>深圳</li>
<li>东莞</li>
<li>珠海</li>
<li>佛山</li>
</ul>
</li>
<li>
<h4>江苏省</h4>
<ul>
<li>南京</li>
<li>无锡</li>
<li>苏州</li>
<li>常州</li>
<li>扬州</li>
</ul>
</li>
</ul>
</body>
网站上的使用:
至于小圆点,如何变化,是CSS的事情,不是HTML的事情。
ol就是ordered list
<ol>
中国著名城市
???<li>上海</li>
???<li>广州</li>
</ol>
所有的注意事项和ul一样一样的。
定义列表表示定义某事的一个列表。
<dl>
<dt>HTML语言</dt>
<dd>HTML语言是基本的描述文字语义的语言,负责页面的结构</dd>
<dt>CSS语言</dt>
<dd>CSS是负责描述页面样式的语言</dd>
<dt>JavaScript语言</dt>
<dd>JavaScript是负责描述页面交互的语言</dd>
</dl>
dl是英语definition list定义列表的意思;
dt是英语definition title定义标题的意思;
dd是英语definition description定义描述的意思;
dl中,交替出现dt和dd。dd是dt的解释说明,dd负责解释、描述、定义dt。
也可以单独成为一个dt和dd组,大部分前端工程师更喜欢这样的:
<h4>中国著名女演员</h4>
<ul>
<li>
<dl>
<dt>杨幂</dt>
<dd>出生在北京,老公是刘恺威</dd>
<dd>出演过仙剑奇侠传3</dd>
</dl>
</li>
<li>
<dl>
<dt>刘诗诗</dt>
<dd>老公是吴奇隆</dd>
<dd>出演过步步惊心</dd>
</dl>
</li>
<li>
<dl>
<dt>angelababy</dt>
<dd>老公是黄晓明</dd>
</dl>
</li>
</ul>
这样的好处,就是样式更好管理一些(学CSS之后你就懂了)。
网页中的应用:
dd和dt都是非常经典的容器级标签,里面什么都能放。
放什么标签,和长得样子没有关系,一切看语义!!
表单中的所有元素,都要放在一个form标签中:
<form>
</form>
form就是英语表格的意思。这个标签是一个功能型的标签,不是一个结构型的标签。form标签是后台哥哥来进行配置的。Ajax课程的第一天,我们讲解PHP语言,将介绍更多的表单提交的原理。那时候你就知道了form表单的两个属性method、action,现在先不说。
<input type="text" />
input是英语输入的意思,表示这是一个输入控件,所谓的控件就是用户能点的、能填的东西。
type是英语类型的意思,text是文本的意思。
这又是一个自封闭标签,不是一个标签对儿。因为它并不需要给别的文字添加语义。
至此,我们已经学习了3个自封闭标签:
<meta name=”keywords” content=”手机,电脑” />
<img src=”1.jpg” />
<input type=”text” />
value属性表示默认有的值:
<input type="text" value="haha"/>
<input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
你会发现,当行文本框和单选按钮,非常像
<input type=”text” />
<input type=”radio” />
radio是收音机的意思,按其中的一个键,其他键就弹起来,所以我们的计算机就沿用了这个名字。
单选按钮,必须是互斥的,不能同时选中多个,所以它们必须有相同的name属性。至于是什么name无所谓,但是必须相同。
说道一个提升用户体验的东西,叫做label标签。点字的时候,小圆点就能被选择上。
<input type="radio" name="sex" id="nan"/>
<label for="nan">男</label>
label就是标签的意思,id就是id的意思。
现在,这个for属性和id的值是一样的,产生了绑定关系。这是我们学习的第一个有绑定关系的标签,后面还要学习一个。就把某一个label和input产生了绑定关系。
<input type="checkbox" name="hobby" /> 篮球
<input type="checkbox" name="hobby" /> 足球
<input type="checkbox" name="hobby" /> 羽毛球
checkbox就是复选框的意思,name属性虽然现在感觉没有啥用,但是还是应该设置为相同的。
<input type=”password” />
[图片上传失败...(image-bed414-1550760431599)]
<input type="button" value="我是一个普通按钮哈哈" />
<input type="submit" value="提交按钮哈哈" />
<input type="reset" value="复位重置按钮哈哈" />
HTML4.01层面就是上面这些input系列:
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="password" />
<input type="button" />
<input type="submit" />
<input type="reset" />
<select>
???<option>1950</option>
???<option>1951</option>
???<option>1952</option>
???<option>1953</option>
???<option>1954</option>
</select>
select表示选择的意思,option是选项的意思。
这是一个组合使用的标签组,和ul、li的关系是一样的。
能够换行的输入文本的控件:
<textarea cols="40" rows="20">这家伙很懒,什么都没留下</textarea>
text文本,area区域。cols多少列,rows多少行,我们一般都是用css来控制。
这是一个对儿标签,里面的内容是默认文字。
HTML4.01层面(XHTML1.0层面),就这些,表单的东西,我们HTML5将扩充。
table就是表格、桌子;
tr就是table row表格行的意思;
td就是table dock表格小格的意思。
每一个tr就是一行,每行中的小格格就是td
<table border="1">
<tr>
<th>品牌</th>
<th>价格</th>
<th>类别</th>
</tr>
<tr>
<td>宝马</td>
<td>30w</td>
<td>高级轿车</td>
</tr>
<tr>
<td>奔驰</td>
<td>50w</td>
<td>高级轿车</td>
</tr>
<tr>
<td>现代</td>
<td>20w</td>
<td>中级轿车</td>
</tr>
<tr>
<td>QQ</td>
<td>2w</td>
<td>低级轿车</td>
</tr>
</table>
这组标签三层嵌套。td的数量是一样多的。具有表头语义的小格格,用th替代td即可。
<tr>
<th>品牌</th>
<th>价格</th>
<th>类别</th>
</tr>
<tr>
<td>宝马</td>
<td>30w</td>
<td>高级轿车</td>
</tr>
本质上讲,th和td都是小格格,只不过th有表头小格格的语义;
rowspan 行跨度
colspan 列跨度
小练习,制作下面的表格:
<!--题目一-->
<table border="1">
<tr>
<td>1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
<!--题目二-->
<table border="1">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
<!--题目三-->
<table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
HTML还剩余的知识:
表格的其余组件比如tbody、thead
div、span标签
HTML注释、转义字符
废弃标签介绍
思路:先输出表格,再考虑行跨度(rowspan)和列跨度问题(colspan)。
<tr>
<th>万公顷</th>
<th>万亩</th>
<th>万公顷</th>
<th>万亩</th>
</tr>
<tr>
<td>北京</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>北京</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>北京</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>北京</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
标签:程序 后台 表达 option inpu 练习 cimage hot check
原文地址:https://www.cnblogs.com/shy-kevin/p/11369382.html