黑马程序员技术交流社区
标题:
[成都校区】html基础理论
[打印本页]
作者:
小西瓜。
时间:
2019-4-11 08:51
标题:
[成都校区】html基础理论
Html总结
一:前言以及web标准
web:
广义:互联网
狭义:网页
网页:
1)网页中的内容:文字、图片、视频、音频、链接、flash。
2)制作网页:
通过html代码
3)浏览网页:
通过浏览器(IE、谷歌、火狐、苹果、欧朋)
问题?
同一个网页,在不同的浏览器中,显示效果可能不一样。
4)浏览器软件的厂商不同的,使用的技术(内核)是不一样的。
5)江湖盟主:W3C组织,制定一系列跟网页相关的标准。
6)web标准:
网页中有哪些代码组成?
1)html代码 (网页排版) ---网页结构
2)css代码 (外观样式) ---网页表现
3)javascript代码 (网页特效)---网页行为
二:认识html
HTML:
1)超文本标记语言。
2)语言的规范:
1》由各种标签组成,例如:图片标签、文字标签、超链接标签等等等等。
2》标签都使用<>来包裹。<img />
3》网页文件有固定的骨架代码:
4》标签的分类(特点):
A、双标签,有开始有结束,例如:<head></head>
B、单标签,只有1个标签,例如:<br />、<img />
5》标签和标签之间的关系:
A、并列关系(兄弟关系),例如:<head></head>和<body></body>
B、嵌套关系(父子关系),例如:<head></head>和<title></title>
三:html常用标签
html中的标签:
1)标题标签:
1》<h1></h1>.....<h6></h6>
2》双标签
3》特点:
1)标签中的文字加粗
2)标签在网页中独占一行
2)段落标签:
1》<p></p>
2》双标签
3》特点:
1)独占一行
3)水平线标签:
1》<hr />
2》单标签
4)换行标签
1》<br />
2》单标签
5)div和span
1》<div></div>、<span></span>
2》特点:
div独占一行
span一行可以放多个
6)文本格式化标签(对标签中的文字有修饰效果)
1》加粗效果:<b></b>、<strong></strong>
2》斜体效果:<i></i>、<em></em>
3》删除线效果:<s></s>、<del></de>
4》下划线效果:<u></u>、<ins></ins>
7)图像标签
1》<img src="" />
2》标签属性
alt属性:不能显示的图片显示的文字
title属性:
width属性:宽高不继承。一般表格居中用w600
height属性:
8)链接标签
1》<a href=""></a>
2》标签属性:
href属性:链接到的网页地址。
1)打开一个其他网站的页面(外部链接)
2)打开一个自己网站的页面(内部链接)
href="demo01.html"
3)空链接
href="#"
target属性:链接页面的打开方式。
1)当前窗口打开。【默认】
target="_self"
2)在新窗口打开。
target="_blank"
9)注释标签
1》提示作用
2》<!-- 注释文字 -->
3》快捷键:ctrl + /
扩展标签:
1)锚点定位
① 在当前页面,可以快速定位。
② 使用步骤
第1步,先找到目标位置,添加个id属性
第2步,创建一个超链接,href的值为“#id值”
2)base标签
① 统一设置页面中所有a标签的打开方式
② 使用:
<base target="_blank" />
1)单标签
2)必须写在head标签中
3)pre标签
<pre></pre>
保留标签中文字的格式。
4)特殊字符
html中预留(征用了)一些符号,例如:><。
如果我们想在页面显示这些符号,就用特殊字符代替。
空格:
> :>
< :<
四:路径
路径:
1)相对路径(相对于自己)
A、同级路径(跟自己在同一个文件夹) 直接写文件名
B、下一级路径 /
C、上一级路径 ../
2)绝对路径(不变的路径)
A、绝对的本地地址(本机地址)---基本不用
C:\Users\muxiaoshuai\Desktop\html01\images\timg.gif
B、绝对的网络地址(别人网站上文件的路径)
http://www.itheima.com/images/logo.png
五:表格table
表格:
1)表格相关的标签
<table></table>
<tr></tr>
<td></td>、<th></th>加粗居中
<caption></caption>写在table内tr前面
2)表格的属性(加给table标签)
边框:border
宽width、高height
水平方向的位置:align
单元格外面的距离:cellspacing
单元格内文字距边框的距离:cellpadding
3)合并单元格
1)区分跨行合并还是跨列合并
2)步骤:
1.先确定是跨行rowspan还是跨列colspan
2.找到目标单元格(起始单元格),写合并方式和合并数量
3.删除多余的单元格
六:列表
列表:
1)无序列表
<ul>
<li></li>
</ul>
2)自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
七:表单
表单要提交必须用<form></form>
表单:
1)表单域
<form></form>
2)输入框
文本输入框:<input type="text" value="默认内容" />
密码输入框:<input type="password" />
3)单选按钮和复选框
<input type="radio" name="sex" checked="checked" />
<input type="checkbox" name="hobby" checked="checked" />
4)各种按钮
普通按钮:<input type="button" value="按钮" />
表单提交按钮:<input type="submit" />
表单重置按钮:<input type="reset" />
图片提交按钮:<input type="image" src="" />
5)文件域(文件上传)
<input type="file" />
6)下拉列表
<select>
<option></option>
<option selected="selected"></option>
</select>
7)文本域
<textarea></textarea>
8)label标签:
提示文字+input标签
1)作用:
把提示文字和input绑到一起,单击文字跟单击输入框的效果是一样的。
2)用法:
第1种:直接用label把文字和input一起包裹起来。
<label>用户名:<input type="text" value="默认值"> </label>
第2种,用label只包裹文字,然后通过for和id来绑起来。
<label for="yu">用户名:</label><input type="text" value="默认值" id="yu">
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2