您的位置：首页 > Web前端 > CSS

HTML和CSS网页开发基础

2019-08-31 07:12 1451 查看

本文转载于:猿2048网站HTML和CSS网页开发基础

一 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>

<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 定义各种字体相关的样式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： H2 RED

相关文章推荐

新的分享

章节导航