本帖最后由 杭州10期-王鹏飞 于 2021-8-31 20:50 编辑
html 定义：超文本标记语言（标准通用的标记语言下的一个应用）
全程（hyper text markup language）
他不是一种编程语言，而是一种标记语言（markup language），是网页制作必备
超文本：之页面内可以包含图片、链接、甚至音乐、程序等非文本元素。
安装Hbuilderhbuilder 快捷键
ctrl+n 再按住w 新建一个项目
ctrl+n 再按住h新建一个html文件
ctrl+s保存
ctrl+x 删除一行
ctrl+r 在浏览器中打开
html基本格式
<!DOCTYPE html>
<html>#html文档的开始
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
html中常见的标签
（1）标题标签
<h1></h1>#最大,------<h6></h6>#最小
（2）段落标签
<p></p> p表示一个段落而且是自动换行的
:表示一个空格，
em：表示斜体
i：表示斜体
font：表示加颜色 color：颜色
strong和b：表示字体加粗
br：实现换行
（3）图片标签
格式：<img sec="" alt="" />
两种上传方法：a、直接引用网络上图片赋值图片链接直接用网上图片<img sec="链接" alt="" />
b、引用本地图片<img sec="路径.img.jpg" alt="" />
注意：谷歌浏览器不支持alt属性，但是可以吧属性换为title
（4）链接标签
1。链接标签<a href=""></a>,覆盖原有页面直接在href后接网址
2.新开窗口在网址后面加 target=“_blank”
3.也可以加图片进行链接跳转 ---图片加在a标签中间
4.死链接加#
（5）列表标签
有序列表（ordered lists）：<ol><li></li><.ol>
无序列表（UNordered list）：<ul><li></li></ul>
（6）表格标签
基本格式：<table border="" cellspacing="" cellpadding="">
<tr>
<th>表头
</th>
</tr>
<tr>
<td>
</td>
</tr>
</table>
其中tr代表行，td代表列
border：边距
cellspacing：单元格与单元格的距离
cellpadding：单元格与内容之间的距离
align=“center”：表格居中
width：加宽
height：加高
快速声场表格标签
例如：快速生成三行两列的快捷键
table>tr*3>td*2 按住tab键
表格跨行和表格跨列
colspan=“2”；合并两列
rowspan=“2”；合并两行
（7）表单标签
格式：<from>...</from>
action:开始网址 method：get和post等等
单表标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text铭文
密码格式：password密文
性别：radio 性别格式 单选，单选类型radio，注意在name要加上sex，
复选框：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样式
<style type="text/css">
p{
color:blue;
}
</style>
c、通过外链的方式
<link rel="stylesheet" type="text/css" href="../css/test.css" />
（2）id选择器（id选择器，id所对应的值前面要加#） 知识扩展;id属性1.是元素的唯一标识 2.是同一个页面中不能有相同id 3.同一页面中，不同元素有相同id 也不行
<style type="text/css">
#yy{
color:blue;
}
</style>
（3）标签选择器
（4）class选择器（class所对应的值前面要加.）
<style type="text/css">
.yy{
color:blue;
}
</style>
（5）组合选择器（用“，”隔开）
<style type="text/css">
p，em，#yy{
color:blue;
}
</style>
（6）伪类选择器
<style type="text/css">
p{
color:blue;
}
p{
color：red；
cursor: pointer；#鼠标到上面会变为手
}
</style>
（7）字体和文本样式
<style type="text/css">
p{
font-size：50px；字体大小
font-family：“微软雅黑” 字体
font-style：italic；斜体
font-weight：bold ； 加粗
text-decoration：underline；下划线
text-align：center 文本内容居中
cursor.pointer ; 实现鼠标移动到鸡腿内容后变为手状
}
</style>
|
|
490
0
多测师社区 
