HTML/CSS从零开始-HTML基础(一)

一、web标准

1.1结构

(1)xhtml(Extensible Hypertext Markup language) 可扩展超文本标记语言  
(2)W3C(world wide web consortium)万维网联盟

a、制定了结构(xhtml、xml)、表现(css)、标准。

1.2表现

(1)css(cascading style sheets)层叠样式表

1.3行为

(1)ECMA(Europan Computer Manufactures Association)欧洲电脑场商联合会
a、制定了行为 DOM(Document Object Model) 文本对象模型
b、ECMAscript标准

二、HTML基本结构

<!doctype html>

<html>
  <head>
  <meta charest="utf-8">     <!--编码格式-->
  <title></title>
  </head>
  <body>
  <h1></h1>                   <!--标题-->
      .
      .
      .
  <h6></h6>
  <p></p>                      <!--段落-->
  </body>
</html>

三、基本语法

3.1常规标记

<标记 属性1="属性值1" 属性2="属性值2" ></标记>
如下:
<strong></strong>  <b></b>       <!--加粗-->
<em></em>   <i></i>              <!--倾斜-->

3.2空标记

<标记 属性="属性值"/>
如下:
<hr/>                    <!--水平线-->
<br/>                    <!--换行-->
<img src="路径"/>        <!--插入图片-->

&nbsp;空格

四、常见标记(标签)

4.1列表

a、有序列表
<ol>  ordered
  <li></li>
  <li></li>
  <li></li>  
</ol>

b、无序列表
<ul>  unordered
  <li></li>
  <li></li>
  <li></li>  
</ul>

c、自定义列表
<dl>  definition list
  <dt>被解释</dt>  
  <dd>解释</dd>  definition description
</dl>

说明:dd可以重复,但是dt只允许有一个;
      有序列表中参数 tyle="A",start="3",//第一个序列从C开始。

4.2图片标签

<img src="目标文件及全称" alt="图片(插入错误时)替换文本" title="图标(鼠标点上时显示的内容)">

4.3超链接

<a href="路径地址" target="_blank"></a>

路径分为:绝对路径(https//www.baidu.com),相对路径如(images/inder.html).
target默认属性值为_self;_blank为打开新窗口

4.4块标签

<div></div>
说明:a、块之间自动换行
      b、如果div块限定宽、高,内容为中文时,自动换行;如果是英文不换行,会溢出。
<span></span>
说明:a、span块之间不换行,宽高不能限定,随着文本的长度变化。

4.5表格标签

1、语法:<table width="" height="" border="1(表框像素)"bordercolor="表格框颜色" cellspacing="0(单元格间距)" cellpadding="内容离左边框像素">
2、说明;在表格给定宽高后,用属性cellpadding时,如果给定宽度超出设定的宽高,表格会被撑开。
      <tr>
      <th><th>
      <th><th>   <!--th表头变粗-->
      <th><th>
      </tr>
      <tr>
      <td><td>
      <td><td>   <!--td单元格,tr行-->
      <td><td>
      </tr>

3、单元格合并属性
   colspan 合并列
   rowspan 合并行
   语法:rowspan="3"  //合并三行

4、表单

a、表单框
 语法:<form name="表单名称" method="post/get" action=""></form>
说明:

b、文本框
<input type="text" value="默认值"/>

c、密码框
<input type="password" placeholder="提示信息"/>

d、单选框
<input type="radio" name="自定名(一致,必写)"/>
如下:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

e、多选框
<p>择偶标准</p>
<input type="checkbox" name="boy" value="185"/>185
<input type="checkbox" name="boy" value="黑"/>黑
<input type="checkbox" name="boy" value="男"/>男
<input type="chechbox" name="boy" value="东北"/>东北

disabled="disabled"(禁用、禁选)
checked="checked"(默认选中)
f、重置
(1)<input type="reset" value="默认值"/>  (重置,清空以上填写的数据)
g、按钮
(1)<input type="button" value="只是起跳转,不提提交"/>
(2)<input type="submit" value="既跳转,又提交"/>

说明:按钮作为标签时<button>按钮</button>既跳转,又提交

h、下拉列表
(1)<select name="">
  <option></option>
  <option></option>
  </select>

i、文本域
<textarea cols="宽" rows="行数" name="">
</textarea>

注明:
(1)以上文本框放在表单form里;

(2)在form中属性method的属性值post/get的区别?
    a、get是从服务器上获取数据,post是向服务器传送数据;
    b、get是把参数值加到提交表单的Action的属性所指的URL中,值和表单内的各个字段一一对应,在URL中可以看见,
       post是通过HTTP,post机制将表单内的各个字段与其内容放置在HTML HEADER内一起传送给ACTION属性的URL地址,用户看不见这个       过程。
   c、对于get方式,服务器端的ReqestQueryString获取变量的值,对于post方式服务器用Request.Form获取提交数据。
   d、get数据传输量小不大于2kb,post的传输量大,一般不受限制
   f、get安全性低,post安全性高,但传输效率高

(3)value在input中的用法
  a、type="button" /"reset"/"submit";表示按钮上的文本
  b、type="text"/"password";表示初始值
  c、type="check"/"radio"定义与输入相关值

(4)表单嵌套
<table>
  <form>
  <tr>
     <td><input type="text" placeholder="填写用户名"></td>
     <td><input type="password" placeholder="请输入密码"></td>
  </tr>
  <tr>
     <td><input type="button" value="忘记密码?"></td>
     <td><button>登录</button></td>
  </tr>
</form>
</table>

时间: 2024-08-04 03:35:35

HTML/CSS从零开始-HTML基础(一)的相关文章

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

(1) css的核心基础

 css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg: 身高:172CM: } 这个表实际是由3个要素组成的,即姓名.属性.属性值.通过这样一张表,就可以把一个人的基本情况描述出来了.表中每一行分别描述了一个人的某一种属性,以及该属性的属性值. css的规则:三级标题{                             用英文写出来:h3{ 

HTML/CSS从零开始-CSS基础(二)

一.css定义 (cascading style sheets) 层叠样式表 表现标准语言,对网页信息显示进行控制 二.css的建立 2.1内部建立 (建立在head里用标签<style>)语法:      <head>      <style type="text/css">      div{widtn:300px;height:300px;border:1px solid red;}      </style>      说明:(1

CSS从零开始(1)--CSS基础语法

1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注:选择器通常是你需要改变样式的html元素. 每条声明有一个属性和一个值组成. 属性(property)是你希望设置的样式属性(style attribute).每个属性都有一个值,属性与值之间通过冒号(:)隔开. 例:h1{color:red;font-size:10px;} 2.值的不同写法和单位

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

[JavaWeb基础] 028.CSS简介和基础语法

css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css 的优先顺序 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) css 的基础语法 代码结构 颜色的写法   p { color

【转贴】-- HTML、CSS、JS基础知识整理

HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 . Html是通过标签来定义的语言,代码都是由标签所组成 .Html代码不用区分大小写 . Html代码由<html>开始</html>结束.里面由头部分<head>

CSS网页布局基础-圣杯布局和双飞翼布局

行布局 多列布局 圣杯布局 双飞翼布局 一.行布局 行布局垂直水平居中 注:这里没有用margin: 0 auto;先让它水平居中,而是使用了绝对定位布局,然后设置top:50%; left:50%;但是光设置这个还不够,因为这并不是水平垂直居中,因为它并没有考虑自身的宽度和高度,所以这里根据盒子本身的高宽又再此基础上设置了margin-left和margin-top.如果只设置了top:50%; left:50%;而没有设置margin-left和margin-top,效果如下: 代码如下:

html+css学习笔记 [基础1]

------------------------------------------------------------------------------------------------------------- PSD (源文件)                                                    JPG/GIF/PNG  (导出图)                                    //网页大图高清图 体积大 JPG:不支持透明半透