Web基础了解版01-html-css
HTML
网页构成
摘要 | 说明 |
---|---|
结构(HTML) | HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 |
表现(CSS) | CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 |
行为(JavaScript / jQuery) | JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的 |
HTML文件结构
<html></html>为HTML页面中的根标签,所有的HTML网页中的标签都在<html></html>中。
这里<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script><style>、<link>、 <meta>等标签。
在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
标签语法
标签由英文尖括号 < 和 > 括起来,如:<html>
html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,<title>..</title>;还有一些是自结束标签,如:<br/>
标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。如: <div><p>..</p></div>
注释是不可以嵌套的,如:<!-- <!-- 注释部分 --> -->
HTML标签不区分大小写,<h1>和<H1>是一样的,但万维网联盟(W3C)建议小写。
常用标签
<h1>...</h1> | 标题 |
<br /> | 换行 |
<hr /> | 分割线 |
<p>...</p> | 段落 |
<span></span> | 行内 |
<img src="" /> | 图片 |
<a href=""></a> | 超链接 |
<ul>...</ul> | 无序列表 |
<ol>...</ol> | 有序列表 |
<li>...</li> | 列表项 |
<table>...</table> | 表格 |
<tr>...</tr> | 一行 |
<td>...</td> | 一列 |
<th>...</th> | 列标题 |
<form>...</form> | 表单 |
<input> | 输入框 |
<select>...</select> | 下拉列表 |
<option>...</option> | 下拉选项 |
属性
align="left" 【align="center",align="right" 左中右】
style="background-color: red" 【样式】
<img alt="加载失败提示" src="../网络/本地路径" border="边框" width="100px" height="120" />【宽高只设置一项即可,另一项会自适应】
<a href="../网络/本地路径" target="_self"> 【" target="_blank"在新窗口打开,默认原窗口打开】
列表
<ul type="square">
<li>...</li>
<li>...</li>
</ul>
在ul标签中添加属性 type="" circle 空心圆,disc 实心圆 (默认),square 实心方块
在ol标签中添加属性 type="1/a/A/i/I"
表格
<table>
<tr> 【行】
<th></th> 【标题列】
</tr>
<tr>
<td></td> 【列】
</tr>
</table>
table标签中可以声明的属性
border="" 表格的边框
width="" 表格的宽度
height="" 高度
align="" 表格的对其方式
bgcolor="" 背景颜色
td标签内定义对齐方式的属性
align="" 设置当前单元格水平对齐
valign="" 设置当前单元格垂直对齐
bgcolor="" 设置背景颜色
合并单元格
rowspan=" 合并单元格的个数 合并行
colspan=" 合并单元格的个数 合并列
表单
<form action="提交的路径" method="get/post">
<input type="text" name="文本框" value="默认值"/>
<input type="password" name="密码框" value="默认值"/>
<input type="radio" name="单选框" value="..." checked="默认选择">
<input type="checkbox" name="复选框" value="..." checked="默认选择">
<select name="下拉列表">
<option value="china" selected="默认选择">中国</option>
</select>
<input type="hidden" name="隐藏域" value="...">
<input type="button"name="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit"name="提交按钮" value="...">
</form>
get:是将所有的提交的数据显示在地址栏,长度会有一些限制
post:将要提交的数据放在请求体中,在url表单里面没有任何数据
提交时以key:value形式,其中文本框、密码框的key为name 值为提交数据
其中单选框、复选框、隐藏域、提交按钮key为name 值为value
下拉列表name在select标签value在option标签提交时同上key为name值为value
常规属性
id: 标签的唯一编号,识别码
class : 标签的分类,用来识别一组标签。
style: 标签的风格、样式
p,form,ol,ul,li,dl,dt,dd,h3{margin:0;padding:0;list-style:none} 样式清除
事件属性
onblur: 失去焦点
onclick: 鼠标点击
onbdclick: 双击
onmouseover: 鼠标移动到元素上
CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML元素(或内容)在浏览器内的显示样式
语法
CSS样式由选择符(选择器)和声明组成,而声明又由属性和值组成
语法说明
属性 (property) 是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)
多个声明:如果要定义不止一个声明,则需要用英文分号”;”将每个声明分开。虽然最后一条声明的最后可以不加分号,但尽量在每条声明的末尾都加上分号
每行最好只描述一个属性
CSS对大小写不敏感,但建议使用小写。不过存在一个例外:class 和 id 名称对大小写是敏感的。
CSS注释:/* 注释内容 */
编写位置
方式一:写在标签的style属性中
<p style=“font-size:30px”>字体大小用px表示</p>
方式二:写在html头的style标签中(style标签一般写在head标签与title标签之间)
<style type="text/css">
p{
background-color: yellow;
}
</style>
方式三:写在外部的css文件中,然后通过link标签引入外部的css文件
<link rel="stylesheet" type="text/css" href="style.css">
优先级按照上述讲的三种方式依次降低
选择器
标签选择器:标签名 <html的标签如:div>
id选择器:#id(名) <p id="属性名">
类选择器:.class(名) <p class="属性名">
组选择器:选择器1,… 【同时使用多个选择器选中一组元素,使用,分隔】
派生选择器:选择器1 选择器2 … 【根据上下文关系,选择元素的后代元素,使用空格隔开】
常用样式
颜色:color:red;或 #00F6DE
宽度:width:20px; 或 %20
高度:height:20px; 或 %20
背景颜色:background-color: #00F6DE
字体大小:font-size:20px;
文本居中:text-align:center;
div居中:margin-left:auto; margin-right:auto;
1px实线边框:border:1px solid;
列表去修饰:ul{list-style:none;}
对于样式暂时不考虑深入了解
Web基础了解版01-html-css的更多相关文章
- Web基础了解版04-XML-Tomcat-Http
XML 什么是XML - Tomcat - Http XML:eXtensible Markup Language (可扩展标记语言). XML 是一种标记语言,很类似 HTML. XML 的设计宗旨 ...
- Web基础了解版05-Servlet
Servlet Servlet? 从广义上来讲,Servlet规范是Sun公司制定的一套技术标准,包含与Web应用相关的一系列接口,是Web应用实现方式的宏观解决方案.而具体的Servlet容器负责提 ...
- Web基础了解版06-Jsp
Jsp Jsp全称Java Server Pages,也就是在我们JavaWeb中的动态页面. Jsp能够以HTML页面的方式呈现数据,是一个可以嵌入Java代码的HTML. Jsp其本质就是一个Se ...
- Web基础了解版02-JavaScript
JavaScript 特性 ① 解释型语言.JavaScript是一种解释型的脚本语言,JavaScript是在程序的运行过程中逐行进行解释,不需要被编译为机器码再执行. ② 面向对象.JavaScr ...
- Web基础了解版03-jQuery
jQuery jQuery,顾名思义,也就是JavaScript和查询(Query)极大地简化了JavaScript开发人员遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax. jQuer ...
- Web基础了解版10-Filter-Listener
Filter 对于WEB应用来说,过滤器是一个驻留在服务器中的WEB组件,他可以截取客户端和WEB资源之间的请求和响应信息. 在一个WEB应用中可以部署多个过滤器,多个过滤器就组成了一个过滤器链,请求 ...
- Web基础了解版07-EL表达式-运算符-11个隐式对象
EL EL(Expression Language)是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进 ...
- Web基础了解版09-Cookie-Session
Cookie Cookie 是一种服务器发送给浏览器以键值对形式存储小量信息的技术. 当浏览器首次请求服务器时,服务器会将一条信息封装成一个Cookie发送给浏览器,浏览器收到Cookie,会将它保存 ...
- 基础总结(01)--css清除浮动几种方法
1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...
随机推荐
- Java-selenium
public class chrometest { public static void main(String[] args) throws InterruptedException { Strin ...
- linux内核的preempt抢占调度,preempt_count抢占保护“锁”
抢断调度,是调度机制对实时系统需要的支持,是一种快速响应的重调度机制.既然与重调度有关,那么就先回顾一下调度和重调度. 调度分两种情况,1. 一种是自愿调度,由代码主动调用schedule来让度cpu ...
- libwebsocket协议切换状态机
libwebsocket为连接(connection)定义了一组状态机-lws_connection_states,通过状态机我们来看libwebsocket如何实现协议的切换.除了lws_conne ...
- 你真的会用JavaScript中的sort方法吗
在平时的业务开发中,数组(Array) 是我们经常用到的数据类型,那么对数组的排序也很常见,除去使用循环遍历数组的方法来排列数据,使用JS数组中原生的方法 sort 来排列(没错,比较崇尚JS原生 ...
- Spring基于构造函数和设值函数的依赖注入
基于构造函数的依赖注入 我们知道,bean标签中指定的类会进行初始化,这个初始化过程中自然会调用构造函数,那我们也可以利用这个构造函数完成依赖注入. 先创建一个类: public class Text ...
- 16 Zabbix4.4.1系统告警“Zabbix agent is not available (for 3m)“
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 Zabbix4.4.1系统告警“Zabbix agent is not available (fo ...
- 以太网驱动的流程浅析(一)-Ifconfig主要流程【原创】
以太网驱动的流程浅析(一)-Ifconfig主要流程 Author:张昺华 Email:920052390@qq.com Time:2019年3月23日星期六 此文也在我的个人公众号以及<Lin ...
- 扛把子组20191031-2 Beta阶段贡献分配规则
此作业的要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9910 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩昊 刘信鹏 B ...
- linuxLVM之LV扩大和缩小容量(非xfs文件系统)
LVM的基础请见:https://www.cnblogs.com/wxxjianchi/p/9698089.html 一.放大LV的容量.放大容量是由内而外来操作的. 1.设置新的lvm分区:用fdi ...
- Linux 系统调用 —— fork 内核源码剖析
系统调用流程简述 fork() 函数是系统调用对应的 API,这个系统调用会触发一个int 0x80 的中断: 当用户态进程调用 fork() 时,先将 eax(寄存器) 的值置为 2(即 __NR_ ...