HTML/CSS从零开始-HTML基础(一)-html教程-PHP中文网

首页

web前端

html教程

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

高洛峰

Oct 09, 2016 pm 03:29 PM

一、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" >
如下：

3.2空标记

<标记属性="属性值"/>
如下：

<！--水平线-->

空格

四、常见标记（标签）

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图片标签

图片（插入错误时）替换文本

4.3超链接

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

4.4块标签

说明：a、块之间自动换行
b、如果p块限定宽、高，内容为中文时，自动换行；如果是英文不换行，会溢出。

说明：a、span块之间不换行，宽高不能限定，随着文本的长度变化。

4.5表格标签

1、语法：

2、说明;在表格给定宽高后,用属性cellpadding时，如果给定宽度超出设定的宽高，表格会被撑开。

3、单元格合并属性

colspan 合并列
rowspan 合并行
语法：rowspan="3" //合并三行

4、表单
a、表单框
语法：

说明：

b、文本框

c、密码框

d、单选框

如下:
男
女

e、多选框

择偶标准

185
黑
男
东北

disabled="disabled"(禁用、禁选)
checked="checked"(默认选中)
f、重置
(1) （重置，清空以上填写的数据）
g、按钮
(1)
(2)

说明：按钮作为标签时既跳转，又提交

h、下拉列表
(1)

i、文本域
<br>

注明：
（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）表单嵌套

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

显示更多

Related knowledge

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。