HTML入门第一天
一. C/S架构和B/S架构
C/S: client/server 客户端服务器架构
B/S: browser/server 浏览器服务器架构
优势:
C/S: 1.需要下载,安装 2.服务器和客户端都需要更新 3.开发维护成本高
B/S: 1.不需要下载,安装 2.只需要更新服务器 3.开发维护成本低
二. 浏览器访问服务器的方式
协议://域名(:端口号)/文件
http://www.163.com/index.html
三. 网页的组成
html css javascript
四. html
Hypertext Markup Language 称之为超文本标记语言,又叫超文本标签语言
作用:不需用编译,通过浏览器执行
文件后缀: .html或者.htm (建议大家使用第一种)
修改文件后缀:
组织---->文件夹搜索选项------>查看---->隐藏已知文件的扩展名去掉前边对勾(这样才能在生成html文件时不会误生成text文件)
五. 开发工具
编辑工具: notepad++
调试工具: chrome(谷歌)
六. 标签
标签: 以<>包含的特定的字符串, 通常有开始标签和结束标签
双边标签(比翼双飞): <标签名>内容</标签名>
单边标签(单身狗): <标签名 />
属性: 对标签进行一定的修饰.
<标签名 属性名1="值1" 属性名2='值2' 属性名3=值3>内容</标签名>
建议大家对属性值使用""引起来
元素: 一个完整的标签就是一个元素
七. 指定字符集:
<meta charset="utf-8"/>
设置字符集步骤:
1.文件保存的编码格式
选项---->转为utf-8无bom格式
2.浏览器执行文件的编码格式
<meta charset="utf-8"/>
八. 全局架构标签
<html>
<head></head>
<body></body>
</html>
注意:
1.所有的内容必须写到html标签中
2.head标签中的内容不在浏览器中显示
3.body里边的内容显示浏览器中
九. 几乎每个标签都要有的属性(结合css/js)
class name id style
十. 字符实体 ( 空格)
http://w3school.com.cn/tags/html_ref_entities.html(可以在这个网站查看所有的字符实体)
十一. 常用标签(文本修饰)
标题: h1-h6 h1最大 h6最小
加粗: <b></b> <strong></strong>
斜线: <i></i><cite></cite><em></em>
下划线: <u></u>
删除线: <s></s>
上标: <sup></sup>
下标: <sub></sub>
字体: <font></font>(size/color/face)
滚动: <marquee></marquee>(direction/scrollamount/loop)
十二. 常用标签(格式控制)
段落: <p></p>
换行: <br />
不换行: <nobr></nobr>
水平线: <hr />(单标签)
原型输出: <pre></pre>
无序列表: <ul></ul><li></li>(type:circle/square/desc)
有序列表: <ol></ol><li><li>(type:a/A/i/I start )
自定义列表: <dl></dl><dt></dt><dd></dd>
总结: 1.容错性强
2.不区分大小写(强制使用小写)
3.可以嵌套
<html> <head> <meta charset="utf-8"/> </head> <body> <marquee direction="right" scrollamount='100' loop=1>鸡年大吉,财源滚滚</marquee><br /><!--marquee这个标签是滚动-->
<font color="blue" size="30" face="微软雅黑">这是一个段修饰的文本</font>
</body>
</html>
实例说明:
在上述代码中,我们可以看到有全局架构标签<html><head></head><body></body></html>,其中head标签里的meta标签在这里是表明字符编码类型为utf-8,而在body中marquee这个标签是表示让字符滚动,在<>中出现的direction这是他的属性的代表的是字符滚动的方向,默认是从右向左滚动,这改成了从左向右,而另一个scrollamout则是他滚动的速度,loop是代表的循环的次数.在这里说一下,一个标签里面的属性并非全要写出来,用不到的或者只需要默认的属性就可以不写出来,大家灵活应用.就好像这里面的loop属性,他如果不写出来得话,字符就会一直滚动,就做成了一个简单的滚动条.再往后看,发现了"鸡年大吉,财源滚滚"这些字符,它们的位置在<marquee>与</marquee>之间,代表的是marquee是一个双边标签,而他显示字符是写在开始符与结束符之间的!后面的就是<br />这个单边标签,它代表的意思是换行,回车.然后就是<!--marquee这个标签是滚动--> 这一串代码,你会发现它是绿色显示的,表明他是注释,不知道大家有没有别的编程语言的基础,在语句中注释是用来解释和说明的,不会参与代码的运行,在html中<!--注释的内容-->注释是这种表示方式.接下来就是<font></font>,他是规定文本的字体、字体尺寸、字体颜色的.因此他有属性color(字体颜色),size(字体尺寸),face(字体),用法在代码中一目了然,我就不解释了.这就是这一整串代码的内容,很基础,也很简单,希望对准备接触html的同学有所帮助,有所裨益!
