感谢这么基础的东西还能有小伙伴前来赏光,
你好,我是阿Ken
之后阿Ken会在本专栏持续更新HTML、CSS的入门基础,
主要以课本教材为主,自学网站资源为辅
有想自学或者是回过头看一看、复习的小伙伴可以过来扎个堆儿了哈哈哈
最近疏于调整状态,仔细说来也是十分惭愧
总是想着与年纪不符的事情,总寻思把能考虑到的都能够考虑周全,不断的给自己施压和一些说不上麻烦但零散的小事儿整的心态一直不是很乐观
再加上我也只是一个学习效率低下的普通人
可能是有点丧了_
但当一个人尝尽孤独的滋味
他会笑着与这个世界和解
当你对自己产生疑问的时候,
就是你该改变的时候了
1.1_html基础
1.1.1_html5文档基本格式及HTML标记
无标题文档
标记
位于文档最前面,使用html5的DOCTYPE声明,会触发浏览器以标准兼容模式来显示页面,浏览器才能将该网页作为有效的html文档。
< html >标记
该标记位于标记 之后,该标记意味着html文档的开始和结束,在它之间的是文档的头部和主体内容。
< head >标记
在< html >标记 之后,定义html文档的头部信息,也称头部标记。
< body >标记
主体标记
html中的单双标记
双标记
内容标记名>
单标记
注释标记
1.1.2_HTML5的语法
标签不区分大小写
这里的p标签大小写不一致
虽然p标记的开始标记与结束标记大小写并不匹配,但是在html5中语法是完全合法的。
允许属性值不使用引号
以上代码等价于
允许部分属性值的属性省略
可以省略为:
1.1.3_标记的属性
内容标记名>
标记可以有多个属性且不分先后顺序
例如:
内容
1.1.4_HTML5文档头部相关标记
这些标记通常都写在head标记内
设置页面标题标记< title>
网页标题名称
定义页面元信息标记< meta/>
引用外部文件标记< link>
内嵌样式标记
1.2_文本控制标记
1.2.1标题和段落标记
标题标记
包括< h1>~< h6>
< hn align="对齐方式">内容< /hn>
left:设置标题文字左对齐(默认值)
center:设置标题文字居中对齐
right:设置标题文字右对齐
段落标记
< p align="对齐方式">内容< /p>
水平线标记< hr/>
< hr 属性=“属性值” />
属性名
含义
属性值
align
设置水平线的对齐方式
可选择left、right、 center 三种值,默认为left
size
设置水平线的粗细
以像素为单位,默认为2像素
color
设置水平线的颜色
可用颜色名称、十六进制#RGB、rgb(r, g. b)
width
设置水平线的宽度
可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100%
水平线标记的用法和属性
传智播客专业于Java、.NET、 PHP、 C/C++、网页设计、平面设计、UI设计。从菜鸟到职场达人的转变就在这里,你还等什么?
Java学院
网页平面设计学院
14
PHP学院
运行结果如下:
4. 换行标记< br/>
1.2.2_文本格式化标记
1.2.3_特殊字符标记
1.3_图像标记
常用的图像格式主要是GIF、JPG和PNG三种
在网页中小图片如图标,按钮等建议使用GIF或PNG格式,透明图片建议使用PNG格式,类似照片的图片则建议使用JPG格式,动态图片建议使用GIF格式。
1.3.1_图像标记< img />
实例:
代码如下:
运行结果:
1.3.2_绝对路径和相对路径
绝对路径
_
绝对路径就是网页上的文件或目录在硬盘上的真正路径,如“D:\HTML5+CSS3\images\logo.gif",或完整的网络地址,如http://www.itcast.cn/images/logo,gif"。
_
网页中不推荐使用绝对路径,因为网页制作完成之后我们需要将所有的文件上传到服务器。就是说很有可能不存在“D:\HTML5+CSS3\images\logo.gif" 这样一个路径。
相对路径
_
相对路经就是相对于当前文件的路径,相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。
_
总结起来,相对路径的设置分为以下3种。
_
(1)图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如< img src=“logo. gif” />。
_
(2)图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用”/“隔开,如< img src=“images/logo.gif”/>
_
(3)图像文件位于html文件的上一级文件夹:在文件名之前加入"…/", 如果是上两级,则需要使用"…/…/"以此类推,如
文本或图像
< a>标记用于定义超链接,href 和target 为其常用属性
href:用于指定链接目标的url地址
target:用于指定链接页面的打开方式 。其取值有_self、_blank两种,
_self意为在原窗口打开,_blank意为在新窗口打开
实例:
代码:
运行后:
点击超链接弹出新窗口:
1.4.2_锚点链接
直接实例:
代码:
运行后如下两张图,在第一张图点击”点我“就会跳转到第二张图上的”这里“: