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的更多相关文章

  1. Web基础了解版04-XML-Tomcat-Http

    XML 什么是XML - Tomcat - Http XML:eXtensible Markup Language (可扩展标记语言). XML 是一种标记语言,很类似 HTML. XML 的设计宗旨 ...

  2. Web基础了解版05-Servlet

    Servlet Servlet? 从广义上来讲,Servlet规范是Sun公司制定的一套技术标准,包含与Web应用相关的一系列接口,是Web应用实现方式的宏观解决方案.而具体的Servlet容器负责提 ...

  3. Web基础了解版06-Jsp

    Jsp Jsp全称Java Server Pages,也就是在我们JavaWeb中的动态页面. Jsp能够以HTML页面的方式呈现数据,是一个可以嵌入Java代码的HTML. Jsp其本质就是一个Se ...

  4. Web基础了解版02-JavaScript

    JavaScript 特性 ① 解释型语言.JavaScript是一种解释型的脚本语言,JavaScript是在程序的运行过程中逐行进行解释,不需要被编译为机器码再执行. ② 面向对象.JavaScr ...

  5. Web基础了解版03-jQuery

    jQuery jQuery,顾名思义,也就是JavaScript和查询(Query)极大地简化了JavaScript开发人员遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax. jQuer ...

  6. Web基础了解版10-Filter-Listener

    Filter 对于WEB应用来说,过滤器是一个驻留在服务器中的WEB组件,他可以截取客户端和WEB资源之间的请求和响应信息. 在一个WEB应用中可以部署多个过滤器,多个过滤器就组成了一个过滤器链,请求 ...

  7. Web基础了解版07-EL表达式-运算符-11个隐式对象

    EL EL(Expression Language)是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进 ...

  8. Web基础了解版09-Cookie-Session

    Cookie Cookie 是一种服务器发送给浏览器以键值对形式存储小量信息的技术. 当浏览器首次请求服务器时,服务器会将一条信息封装成一个Cookie发送给浏览器,浏览器收到Cookie,会将它保存 ...

  9. 基础总结（01）--css清除浮动几种方法

    1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...

随机推荐

  1. nyoj 42-一笔画问题 (欧拉图 && 并查集)

    42-一笔画问题 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:10 submit:25 题目描述: zyc从小就比较喜欢玩一些小游戏,其中就包括画 ...

  2. nyoj 100-1的个数 (因为只统计1的个数，连栈都不需要了)

    100-1的个数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:33 提交数:42 难度:1 题目描述: 小南刚学了二进制,他想知道一个数的二进制表示中有多少个1,你能帮他写一个程 ...

  3. Hadoop之HDFS读写原理

    一.HDFS基本概念 HDFS全称是Hadoop Distributed System.HDFS是为以流的方式存取大文件而设计的.适用于几百MB,GB以及TB,并写一次读多次的场合.而对于低延时数据访 ...

  4. vim常用命令集合（精心整理）

    vim编辑器身为一个强大的linux平台编辑器,我就不多说他强大之处了,直接来简述下常用命令,提高自己使用编辑器的效率. 然后就先说下vim编辑器的模式,有的地方说三种,有的地方说两种,教程是按照两种 ...

  5. location 优先级

    ###我只是个搬运工 规则 等号类型(=)的优先级最高.一旦匹配成功,则不再查找其他匹配项 前缀普通匹配(^~)优先级次之.不支持正则表达式.使用前缀匹配,如果有多个location匹配的话,则使用表 ...

  6. 2019-10-24：伪静态，VULHUB搭建靶场，宽字节sql注入，笔记

    伪静态1,需要开启站点的重写机制,需要修改配httpd配置文件,将LoadModule rewrite_module modules/mod_rewrite.so注释取消,需要apache支持解析.h ...

  7. golang开发环境配置

    下载安装 从 https://golang.org/dl/ 下载最新的安装包. windows直接执行exe,按指示进行安装(默认安装目录是:C:\Go) linxu解压后复制到你喜欢目录就行(一般放 ...

  8. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  9. 经典sql面试题（学生表_课程表_成绩表_教师表）

    转载:https://www.cnblogs.com/qixuejia/p/3637735.html 表架构 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cna ...

  10. 使用Cap解决.Netcore分布式事务

    一.什么是Cap    CAP 是一个基于 .NET Standard 的 C# 库,它是一种处理分布式事务的解决方案,同样具有 EventBus 的功能,它具有轻量级.易使用.高性能等特点. 在我们 ...