一 HTML文档结构

HTML文档结构：<html>、<head>、<title>、<body>构成HTML页面中最基本的元素。

HTML常用标记：1.换行标记  <br>    2.段落标记   <p> </p>   3.标题标记   <h1>~<h6>  数字越小，级别越高。  4.居中标记  <center>需居中内容</center>

5.文字列表标记   有序<ol>无序<ul>

二  表格标记

1. 表格标记  <table> : <table>标记中有很多属性，如width设置表格的宽度，border设置表格的边框，align设置表格的对齐方式，bgcolor设置背景颜色。

2.标题标记 <caption>

3.表头标记 <th>

4.表格行标记  <tr> :以<tr>开头</tr>结尾，一组<tr>表示表格  中的一行。但<tr>必须嵌套在<table>标记中使用。

5.单元格标记又叫列标记   <td>  :一个<tr>可以嵌套若干个<td>

三 HTML表单标记

1.<form>..</form>表单标记

定义处理表单数据程序的URL地址信息等，基本语法格式：

<form action="url"mathod="get"|"post"name="name"onsubmit="单击提交触发事件"target="_self/_blank/_parent">

</form>

     <form>标记的重要属性
     action属性：指定表单数据提交至何处
     method属性：–指定表单数据提交的方式

2.<input>表单输入标记

<input>能够演变为表单中许多不同的元素，取决于type属性

type取值：

　　–text(单行输入文本框)
　　–submit（提交按钮）
　　–password（密码输入文本框）
　　–radio（单选按钮）
　　–checkbox（复选框）
　　–reset(复位按钮) 
　　-button（普通按钮）
　　-file(文件域)

　　-hidden（隐藏域）

　　-image（图像域）
基本格式为：
　　<input type="image" disabled="disabled" checked="checked" width="digit" maxlength="digit"   readonly="" size="digit" 
　　src="Uri" usemap="Uri" alt="" name="checkbox" value="checkbox">
3.<select></select>  下拉列表框标记
　　使用<option>向列表中添加内容，属性为，name：指定列表框的名称。size：指定列表框的选项数量，超出可以通过拖动滚动条查看。
　　　　disable指定当前列表框不可使用。multiple：用于让多行列表框支持多选。
4.<textarea>多行文本标记
　　与单行文本相比，多行文本可以输入更多内容。
 
四。超链接与图片标记
　　1.超链接标记<a href=""></a>  href属性用来设定链接到哪个页面。
　　2.图片标记  <img src="url"width="宽度"height=“高度”border=“图片外边框的宽度”alt=“提示文字（图片无法显示时）”>
 
五。CSS样式表
　　CSS样式表中包括三部分内容：选择符、属性和属性值。语法格式为：
　　　　选择符{属性：属性值；
　　　　例如：　　<style>
　　　　　　　　　　h2{
　　　　　　　　　　　　font-family:宋体；
　　　　　　　　　　　　color:red;
　　　　　　　　　　　　}
　　　　　　　　   </style>

　　CSS选择器

　　　　1.标记选择器：html页面是由很多标记组成的，如图像标记<img>、超链接标记<a>、表格标记<table>等。css标记选择器就用于声明页面中哪些标记采用了css样式。

　　　　2.类选择器：标记选择器有一定局限性，声明一个标记选择器后，页面中所有该标记的内容都会有相应的变化。

　　　　　　类别选择器名称由用户自己定义，并以”.“开头。只需用class声明即可。

　　　　　　<style>

　　　　　　　　.one{

　　　　　　　　　　color:red;

　　　　　　　　　　}

　　　　　　</style>

　　　　　　....<h2 class="one">选择器</h2>

　　3.id选择器

　　　　以”#“开始后加html标记中的id属性值。和类别选择器类似，但html页面中不能包含两个相同的id标记，因此也定义id选择器就只能被使用一次。

　　4.页面中包含css样式的几种方式：行内样式、内嵌式、链接式。

六。CSS3新特征

　　1.模块与模块化结构：

　　　　常用模块:basic box model   定义各种与盒子相关的样式

　　　　　　　　Line   定义各种与直线相关的样式

　　　　　　　　Lists  定义各种与列表相关的样式

　　　　　　　　Text   定义各种与文字相关的样式

　　　　　　　　Color  定义各种与颜色相关的样式

　　　　　　　　Font  定义各种字体相关的样式

HTML和CSS网页开发基础的更多相关文章

  1. HTML与CSS网页开发基础

    HTML标记语言 HTML文件的创建 整个编译器,或者记事本,文件扩展名改为.htm或者.html HTML文档结构 <html>标记:开头,所有HTML文件以<html>标记 ...

  2. 使用JSP/Servalet技术开发新闻发布系统------动态网页开发基础

    什么是动态网页? 动态网页是指在服务器端运行的程序或者网页,它们会随不同客户.不同时间,返回不同的网页. 动态网页的特点? (1).交互性:即网页会根据用户的要求和选择而动态改变和响应.采用动态网页技 ...

  3. 第一章使用JSP/Server技术开发新闻发布系统第一章动态网页开发基础

      一:为什么需要动态网页    由于静态网页的内容是固定的,不能提供个性化和定制化得服务,使用动态网页可真正地与用户实现互动. 二:什么是动态网页  ①:动态网页是指在服务器端运行的,使用程序语言设 ...

  4. ASP.NET网页开发基础(7)

    整理了一点的小知识点: 1.ASP.NET网页扩展名:    .asax 全局应用程序类的扩展名     .xml 访问网页时的扩展名     .htm     .ascx Web用户控件的扩展名   ...

  5. JSP/Servlet------------------------->>动态网页开发基础（一）

    动态网页:是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容. 动态网站可以实现交互功能,如用户注册.信息发布.产品展示.订单管理等等: 动态网页并不是独 ...

  6. jsp第一章 动态网页开发基础

    动态网站可以实现交互功能,如用户注册.信息发布.产品展示.订单管理等等: 动态网页并不是独立存在于服务器的网页文件,而是浏览器发出请求时才反馈网页: 动态网页中包含有服务器端脚本,所以页面文件名常以a ...

  7. jsp动态网页开发基础

    JSP基础语法 jsp页面元素构成 jsp页面组成部分有:指令,注释,静态内容,表达式,小脚本,声明. 1.表达式<%=     %> 2.小脚本<%       %> 3.声 ...

  8. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  9. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

随机推荐

  1. Leetcode 123.买卖股票的最佳时机III

    买卖股票的最佳时机III 给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意: 你不能同时参与多笔交易(你 ...

  2. [luoguP2858] [USACO06FEB]奶牛零食Treats for the Cows（DP）

    传送门 f[i][j][k] 表示 左右两段取到 i .... j 时,取 k 次的最优解 可以优化 k 其实等于 n - j + i 则 f[i][j] = max(f[i + 1][j] + a[ ...

  3. noip模拟赛 小Y的问题

    [问题描述]有个孩子叫小 Y,一天,小 Y 拿到了一个包含 n 个点和 n-1 条边的无向连通图, 图中的点用 1~n 的整数编号.小 Y 突发奇想,想要数出图中有多少个“Y 字形”.一个“Y 字形” ...

  4. Linux下清除DNS缓存

    通常有的时候我们通过域名打不开网页,有可能使DNS缓存的原因(DNS解析的ip地址变了),解决办法如下: 方法一:$nslookup ecafe.pub(这里是你要打开的域名) 方法二:$sudo / ...

  5. MyBatis3错误：Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/log4j/Priority的问题解决

    在使用Maven新建QuitStart类型项目时,引入了MyBatis3.2.0版本的JAR包之后,出现如下错误: Exception in thread "main" java. ...

  6. Hadoop2.0安装之非HA版

    主要步骤跟Hadoop1.0(1.0安装地址)一致,主要在配置这块有更改 安装 下载地址:http://archive.apache.org/dist/hadoop/core/hadoop-2.6.5 ...

  7. 又通过一道题目，替换字符串 —— 剑指Offer

    https://www.nowcoder.net/practice/4060ac7e3e404ad1a894ef3e17650423?tpId=13&tqId=11155&tPage= ...

  8. 从Linux 2.6.8内核的一个TSO/NAT bug引出的网络问题排查观点(附一个skb的优化点)

    梦中没有错与对,梦中没有恨和悔...最好闭上你的嘴.这样才算可爱...我不会说:这不公道,我不能接受.我会用朴素的文字记录点点滴滴,早上4点多起来,一气呵成最近的收获与评价,愤慨与忏悔. 四年多前的一 ...

  9. 运行系统命令而且将输出写到指定日志文件的shell脚本(2)

    上一篇是个简单的能够运行而且写入日志的脚本,可是假设放到生产环境上就显得太粗糙了,所以须要进一步的优化: #! /bin/bash if [ -d "/opt/bmc" ] ; t ...

  10. LeetCode 125. Valid Palindorme (验证回文字符串)

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...