0

0

你需要了解的html标签和页面布局

零下一度

零下一度

发布时间:2017-04-27 13:35:43

|

1922人浏览过

|

来源于php中文网

原创

    当初在学校没有打好基础,毕业工作了,过于追求学习速度,掌握更多知识,从而忽略了细节。快哭了导致现在基础不扎实。。所以啊,基础很重要,不要过于求成,一步一步来。细节决定命运啊。名人都是这么说的,那就一定不会错啦。大笑

下面我们就来总结下:

一.html标签注意

1.html编写要合法的,带有良好结构并拥有语义

2.避免过度使用p和span,使文档更易于应用样式,且在逻辑段落上也更加清晰。

立即学习前端免费学习笔记(深入)”;

根据重要性使用h1-6标签,段落使用p,列表使用ul,内联元素中不可嵌套块级元素,为含有描述性表单元素(input,tetarea)添加label

3.尽可能少地使用标签

4.适当地使用class和id:相同的class可以重复出现,相同的id一个页面只能出现一次

5.标题标签共分为:h1~h6,它们分为表示标题在文档中从高到底的优先顺序。

     H1在一个网页中最好只使用一次,用来修饰主标题,一般是网页的标题。但是实践中h1都是作为logo的标签,靠近 body,以便让搜索引擎最快的领略主题。
      h2表示文章标题或是文档副标题;

    h3网站首页以及其他页面中的栏目标题。
     H2、H3、H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度。

6.在表单form中:

    表单标题


当存在表单标题的时候才使用,如果不存在    ,那么就不要出现

7.关于表单的id和name,这俩个都是为了标记对象名称。id是后来引入的,在这之前都是用name来实现。很多程序员都是通过用name属性来获取表单元素的值;id可以来定义css样式,所以id和name一起使用比较好。

8.选择表格布局,那么网站中的各个页面必须统一使用table,使用表格布局要注意:因为table布局页面的加载过程通常都不会那么平稳自然,所以这种笨拙守旧的布局方式将很有可能扰乱作品的视觉流向。

LANUX蓝脑商务网站系统
LANUX蓝脑商务网站系统

LANUX V1.0 蓝脑商务网站系统 适用于网店、公司宣传自己的品牌和产品。 系统在代码、页面方面设计简约,浏览和后台管理操作效率高。 此版本带可见即可得的html编辑器, 方便直观添加和编辑要发布的内容。 安装: 1.解压后,更换logo、分类名称、幻灯片的图片及名称和链接、联系我们等等页面。 2.将dbconfig.php里面的数据库配置更改为你的mysql数据库配置 3.将整个文件夹上传至

下载

9.内联元素float与块元素float的区别:内联元素float后,增加边框为从边界处往内增加边框,而块元素为往外增加边框。即内联元素float后,再设置size px的边框,其所占区域并不会增加,所以也不会影响布局。

  
  
  
    测试内联元素浮动后边框问题  
      
      
  
  
  

段落1

段落2


10.a标签的rel属性:给链接设置不同的样式很方便



a[rel="prev"]{}
a[rel="next"]{}

所有浏览器都支持 rel 属性。不过这个rel的值是固定的,可以查看w3c

二.页面布局有以下几种:

1.table布局

2.css布局:

①固定布局(固定宽高大小)

②流式布局(用宽高百分比)

③弹性布局(弹性盒子)

④浮动布局(float,可以设置left或者right)

⑤定位布局(position: fixed相对定位,position: absolute;绝对定位)

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

40

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

50

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

12

2026.01.31

漫画防走失登陆入口大全
漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

13

2026.01.31

php多线程怎么实现
php多线程怎么实现

PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

php如何运行环境
php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php环境变量如何设置
php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php图片如何上传
php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.2万人学习

CSS教程
CSS教程

共754课时 | 25.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号