HTML和CSS

HTML简介

HTML语言:Hypertext Markup Language(超文本标记语言),它是互联网上应用最广泛的标记语言,不区分大小写。文件命名方式为index.html(index.htm)

XHTML:eXtensible Hypertext Markup Language(可拓展的超文本标记语言),比HTML更严格,可以理解XHTML是新的HTML规范。要求所有标签必须比闭合,也就是说开始标签要有相应的结束标签。另外,XHTML中要求所有的标签必须小写,除此之外废弃了部分HTML中的标签属性,详细见文档。

DHTML:Dynamic HTML(动态HTML),是相对传统的静态的html而言的一种制作网页的概念,由HTML、CSS、Javascript组成。

HTML5:新的HTML规范,和XHTML完全相反,XHTML是不运行不按照规范的,而HTML5运行这些“恶习”,还增加了客户校验,绘图支持,多媒体支持等功能。

HTML标签

HTML普通标签

<!--...-->:定义HTML注释的标签;
<html>:定义HTML文档的根标签;
<head>:定义HTML页面的头部标签;
<title>:定义HTML页面标题,放置于<head></head>之间;
<body>:定义HTML页面的主体部分;
<meta>:定义文件信息,对网页进行说明,便于搜索引擎查找,放置于<head></head>之间;
设置关键字:<meta name="keywords" content="撸码小哥,coding.ee"/>  
设置描述:<meta name="description" content="记录编程遇到的问题和解决方案"/>
设置作者:<meta name="author" content="撸码小哥"/>
设置字符集:<meta http-equiv="content-type" content="text/html;charset=utf-8">
设置页面定时跳转:<meta http-equiv="refresh" content="时间秒数;url=页面网址">
<style>:用于引入CSS文件,一般放于<head></heand>之间
<script>:用于引入Javascript文件,一般放于<head></heand>之间
<h1>到<h6>:定义标题一到标题6,和world一致;
<p>:定义段落
<div>:定义文档中的结构,为HTML提供结构和背景
<span>:和<div>基本相似,区别是<span>定义的节默认不换行;
<br/>:单标签,插入一个换行;
<hr/>:单标签,定义一条水平线;
<center>:网页的内容默认显示是巨左显示,而<center></center>之间的内容居中;
<font>:用于设置字体颜色、大小、字体等;
<img/>:图片控件标签;
<a>:超链接和锚点

文本格式化标签

<b>:定义粗体文本
<i>:定义斜体文本
<em>:定义强调文本,和<i>效果差不多
<strong>:定义粗体问题,和<b>效果差不多
<sup>:定义上标文本,主要做数学上测次方表达式
<sub>:定义下表文本,主要做化学上的分子式
<bdo>:定义文本显示方向,属性dir值有ltr(左到右)和rtl(右到左)
<del>:定义删除文本,即文本有中线

列表相关标签

< ul>:定义无序列表;该元素只能包含<li>子标签
<ol>:定义有序列表;该元素只能包含<li>子标签
<dl>:定义列表,该标签只能有<dt>、<dd>两种子标签
<dt>:定义列表项的标题
<dd>:定义普通列表项

表格标签

<table>:用于定义表格,<table>由0或1个<caption>子标签,0到1个<thead>子标签,0到1个<tfood>子标签,多个<tr>子标签,多个<tbody>子标签组成。
<table>常用的属性如下:
    border:指定表格边框的宽度,默认是0;
    cellpadding:指定单元格内容和单元格边框的间距,值可以是像素或百分比;
    cellspacing:指定单元格之间的间距,值可是像素或百分比;
    with:指定表格的宽度,值可以像素或百分比;
<caption>::用于定义表格的标题,必须放在<table></table>之间;
<tr>:定义表格行,该标签只能有<tr>或<th>子标签;
<td>:定义单元格,放在<tr>中,表示把一行分成N个单元格,(N取决于N对<td>)
<th>:定义表格页眉的单元格,用法和<td>标签一致,只是显示效果有差别
<tbody>:定义表格的主体,该标签只能包含<tr>子元素,使用<tbody>标签可以将一个表格分成几个独立的部分;
<thead>:定义表格头,用法和<tbody>一致,功能有点差别;
<tfoot>:定义表格脚,用法和<tbody>一致,功能有点差别;

表单标签

<form>标签

action:必填属性,表示表单数据提交到哪个地址;
method:指定表单提交方式,只能是get或post,分别用于GET或POST请求,默认是get方法,开发建议 用post方式;
enctype:指定表单数据的编码方式,属性有3个值:
    applocation/x-www-form-urlencoded:默认,只处理表单里的value属性值;
    multipart/form-data:以二进制流的方式处理表单数据,文件上次时必须使用该属性值;
    text/plain:不对特殊字符编码,适合于表单的属性值为mailto URL形式,也就是说该方式适用于表单邮件的发送;

input标签

<input>:用于接收用户输入的信息,其中的type属性指定输入标签的类型;
单行文本框:type = text,输入的文本信息直接显示在框中;
密码输入框:type = password,输入的文本以圆点形式显示;
单选框:type = radio,如:性别选择
复选框:typr = checkbox,如:多个兴趣选择;
隐藏域:type = hidden,在页面上不可见,但在提交的时候会一起提交数据,用于隐式向服务端传输数据;
提交按钮:type = submit,用于提交表单中的数据内容;
重置按钮:type = reset,将表单中填写的内容均设置为初始值;
无动作按钮:type = button,可以使用javascript为其自定义事件;
文件上传域:type = file,会生成一个文本框和一个浏览按钮;
图像域:type = image,它可以替代submit按钮,即图像提交按钮;
<input>标签其他常见属性:
name:指定input标签的名字,没有设置name属性的属性的标签不能提交数据;
value:指定unput标签的初始值;
checked:设置单选框,复选框的初始状态是否选中;
disable:设置input标签加载时禁用此标签;
maxlength:文本框输入最大字符数,属性值是数字;
readonly:指定文本框内值不允许直接修改

下拉列表标签

下拉列表<select>和<option>一般同时使用;
<select name="country">
    <option value="">---请选择---</option>
    <option value="zh" selected="selected">中国</option>
    <option value="en">英国</option>
</select>
select属性:
    multiple="multiple"表示可以选择多个
    size="2"  表示显示几个,浏览器之间有差异

<textarea> 标签定义多行的文本输入控件

显示多行文本标签

<textarea cols="50" rows="5">要显示的内容</textarea>
框架标签
<frameset>标签
属性rows表示要分成几行,一般使用" , "隔开,其中"*"表示占据剩下所有的区域
属性 clos 表示要分成几列,一般使用" , "隔开,其中"*"表示占据剩下所有的区域
<frame>标签
属性scrolling="yes"表示是否要显示滚动条,滚动条是竖着的
属性noresize="noresize"表示不能拖动和缩小
<noframes>标签

CSS

CSS是层叠样式表(Cascading Style Sheets),用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果和功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

网页中引入CSS

style属性方式:

利用标签中style属性来改变每个标签的显示样式:

<p style="background-color:#FF0000; color:#FFFFFF">
    p标签段落内容
</p>

该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适用于局部修改


style标签方式:(内嵌方式):

在head标签中加入style标签,对多个标签进行同一修改:

<head>
    <style type="text/css">
        p { color:#FF0000}
    </style>
</head>

该方式可以对单个页面的样式同一进行设置,但对于局部不够灵活


导入方式:

前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到,那么就用这种方式:

<style type="text/css">
    @import url(mycss.css);
    div{ color:#FF0000;}
</style>

注意:url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准


链接方式:

通过head标签中link标签来实现,前提也是首先要有一个已经定义好的CSS文件

<link rel="stylesheet" type="text/css" href="mycss.css" />

注明:可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

样式优先级:由上到下,由内到外。优先级由低到高。

选择器

选择器就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。

html标签选择器
class选择器
id选择器
每一个标签都定义了class属性和id属性。用于对标签进行识别,方便对标签进行操作。在定义中,多个标签的class属性值可以相同,而id值要唯一。
伪元素选择器

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注