Html
HTML:超文本标记语言， 不是一个编程语言，是一门标记语言，是网页制作必备
超文本，可以理解为一个进阶版的txt文档
可以包含文本、图片、视频、音频、链接、程序等非文字元素。
Hbuilder快捷键
Ctrl+N 再按W 新建一个项目
Ctrl+N 再按N 新建一个HTML文件
Ctrl+S 保存
Ctrl+x 删除一行
Ctrl+R 在浏览器中打开
编辑界面输入! +tab键联想出html页面的基本结构
Html的基本格式
<!DOCTYPE html>
<html> #html文档的开始
<head>
<meta charset="UTF-8">
<title></title>
<head>
<body>#html文档的体部
<body>
</html>
Html中的常用标签
1）标题标签
<h1>......</h1>#主体最大 <h6>......</h6>字体最小
2)段落标签
<p></p> p标签表示一个段落
 :表示空格，一个 表示空一格
em:表示斜体
i:表示斜体
font: 表示加颜色 color: 加什么颜色
strong和b: 表示字体加粗
br: 实现换行
3）图片标签
格式： 图片标签：<img src=" " alt=" " />
a、直接引用网上图片：复制图片链接 直接引用网上图片<img src="网址" alt=" "/>
b、引用本地图片：<img src="img.jpg" alt=" "/>,需要先把图片添加到img的路径下，然后加img的路径后面可加文字鼠标移到上面可以显示，注意在引用本地图片时需要注意图片所在的位置：
1、"./":表示当前位置 同一级别
2、"../":表示上一级目录
3、"../../":表示上上级目录
4、谷歌浏览器不支持 "alt" 属性，但是可以把属性换成 "title"
5、（加宽属性：width ，加高属性：height）
4）链接标签
1、链接标签<a href= " "></a>覆盖原有页面直接在herf后接网址
2、新开窗口在网址后面加target="_black"
3、也可以加图片进行链接跳转 --图片加在a标签中间
4、死链接加#
5）列表标签
有序列表 (ordered lists) : <ol><li></li></ol>
无序列表 (unordered lists) : <ul><li></li></ul>
6)表格标签
表格标签的基本格式：
<table border=" " cellspacing=" " cellspacing=" ">
<tr><th> Header</th></tr>
<tr><td> Data </td></tr>
<th>元素中的文本通常呈现为粗体并且居中
<td>元素中的文本通常是普通的左对齐文本
表格标签：主要由行与列组成。
tr代表行，td代表列；
border代表边距；
cellspacing：单元格与单元格的距离
cellpadding：单元格与内容之间的距离
align="center"：表格居中
width:加宽 height:加高
7）快速生成表格标签：
示例：快速生成3行2列的快捷键
table>tr*3>t*2 按住tab键
8）表格跨行和表格跨列
colspan=" ":合并几列
rowspan=" ":合并几行
9）表单标签
表单标签格式：<form>...</form>
action:开始网址
method：get和post等等
表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text （明文）
密码格式： password （密文）
性别： radio 性别格式 性别是单选，单选类型是radio，注意name要加上sex，不然会出现同时可以选择2个radio的bug，加checked表示默认值
复选框： checkbox
文本框：textarea
上传文件：file
选择框：select
按钮：button
重置：reset
注册：submit
CSS层叠样式表
定义：层叠样式表（Cascading Style Sheets)是一种用来表下面HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1）层叠样式表的基本格式：
a、在标签中加style属性，style就是css样式代码
<p style="color:red:">深圳多测师技术有限公司</p>
b、在head中加style样式
<!--在head中编写style属性，作用于所有的h3标签
<style type="text/css">
h3{
color:blue;
}
</style>
c、通过外链的方式
<link rel="stylesheet" type="text/css" href="../css/test.css" />
2)id选择器 （id选择器，id所对应的值前面要加#）
<style type="text/css">
#yy{
color:red;
}
</style>
3)标签选择器
<style type="text/css">
p {
color:aquamarine;}
</style>
4)class选择器 （class所对应的值前面要加. 点）
<style type="text/css">
.kk {
color:blue;
}
</style>
5)组合选择器
<style type="text/css">
p,em{
color:aqua;}
</style>
6)伪类选择器：
<style type="text/css">
p {
color:aquamarine;
}
/*放置鼠标颜色会发生改变*/
p:hover{
color:red;
}
</style>
7)字体和文本样式
<style type="text/css">
em {
font-size:50px; /*字体大小*/
font-family:"微软雅黑"; /*字体*/
font-style:italic; /*斜体*/
font-weight: bold /*加粗*/
text-decoration: underline; /*下划线*/
text-align: center; /*文本内容居中*/
cursor: pointer; /*实现鼠标移动到具体内容上鼠标形状变为手状*/
}
</style> |
|
|
|
289
0
多测师社区 
