黑马程序员技术交流社区

标题: [石家庄校区] 学习总结 [打印本页]

作者: 李聪赐    时间: 2019-6-1 14:54
标题: [石家庄校区] 学习总结
HTML:超文本标记语言
超文本:比普通文本更强大
标记语言:由标签组成的
文本标签:
文字标签:<font>
属性:color-颜色 size-大小(1~7) face-字体

标题标签:<h1> ~ <h6>
加粗标签:<b>
斜体标签:<i>
下划线标签:<u>
居中标签:<center>

图片标签:<img>
属性:src-图片路径 width-宽度 height-高度 alt-图片找不到显示内容

列表标签:
有序列表:<ol>
属性:type-(数字、字母、罗马字符) start-起始编号
列表项:<li>

无序列表:<ul>
属性:type-(实心圆、空心圆、实心框)

超链接标签:<a>
属性:href-跳转路径 target-打开方式(_self _blank)


块标签:
<span>:元素在一行显示
<div>:元素独占一行

表格标签:<table>
属性:border-边框 width-宽度 height-高度 align-显示位置(left居左 center居中 right居右) bgcolor-背景颜色 background-背景图片
行标签:<tr>
列标签:<td>
属性:
rowspan-合并行
colspan-和并列

其他标签:
换行标签:<br/>
水平线标签:<hr/>
属性:color-颜色 width-宽度 size-高度
空格:&nbsp;
<:&lt;
>:&gt;

表单标签:<form>
属性:action-提交路径 method-提交方式(get post)
get:提交的数据会显示在地址栏中。不太安全。长度有大小限制。提交的数据封装在请求行中。
post:提交的数据不会显示在地址栏中。较为安全。长度没有大小限制。提交的数据封装在请求体中。

表单项:<input> <select> <textarea>
文本框:<input type="text">
密码框:<input type="password">
邮箱框:<input type="email">
数字框:<input type="number">
颜色框:<input type="color">
文件上传框:<input type="file">
图片提交按钮:<input type="image">
隐藏域:<input type="hidden">
单选框:<input type="radio">
复选框:<input type="checkbox">
提交按钮:<input type="submit">
重置按钮:<input type="reset">
日期框:<input type="date">
普通按钮:<input type="button">

下拉列表:<select>
下拉列表项:<option>

文本域:<textarea>
行数:rows
列数:cols

注意事项:
1.如果表单项想被提交,必须要嵌套在form标签中
2.如果表单项想被提交,必须要有name属性
3.如果是单选或复选,必须要有相同的name属性
4.如果是单选或复选有默认值,使用checked属性
5.如果是下拉列表有默认值,使用selected属性


CSS:层叠样式表。就是给HTML美化用的

CSS和HTML结合方式:
1:行内样式:<标签 style="样式设置">
2:页面内样式:在head标签中,定义一个<style></style>代码块
3:外部文件方式:在head标签中,<link rel="stylesheet" href="css文件路径"/>

CSS选择器:
基础选择器:
id选择器:
#id属性值{
样式控制
属性名:属性值;
...
}
类选择器:
.类名{
样式控制
属性名:属性值;
...
}
元素选择器:
标签名{
样式控制
属性名:属性值;
...
}

扩展选择器:
子元素选择器:
元素1 元素2{
样式控制
属性名:属性值;
...
}
父元素选择器:
元素1 > 元素2{
样式控制
属性名:属性值;
...
}
并集选择器:
元素1,元素2,...{
样式控制
属性名:属性值;
...
}
属性选择器:
标签名[属性名="属性值"]{
样式控制
属性名:属性值;
...
}
伪类选择器:
初始化状态:
元素:link{
样式控制
属性名:属性值;
...
}

鼠标悬浮状态:
元素:hover{
样式控制
属性名:属性值;
...
}

被使用状态:
元素:active{
样式控制
属性名:属性值;
...
}

使用后状态:
元素:visited{
样式控制
属性名:属性值;
...
}






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2