你需要了解的html标签和页面布局-html教程-PHP中文网

首页

web前端

html教程

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

零下一度

Apr 27, 2017 pm 01:35 PM

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

下面我们就来总结下：

一.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中：

2b5469ab79cf842344327415c3b3bb95

e911751791aa3ba95dc724e2fb905976表单标题a814477f903c8e27bd1ff8e5c6bbe7c1

a3ae74428855f48d0438405a4619fe75

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

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

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

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

<!DOCTYPE html>  
<html>  
<head>  
    <title>测试内联元素浮动后边框问题</title>  
    <meta charset="utf-8"/>  
    <style type="text/css">  
        *,p,button{  
            margin:0;  
            padding:0;  
            border:0;  
        }  
        button,p{  
            float: left;  
            width: 50px;  
            height: 100px;  
            background-color: pink;  
        }  
        button+button{  
            background-color: gray;  
            border:10px solid red;  
        }  
        p+p{  
            border:10px solid blue;  
        }  
    </style>  
</head>  
<body>  
<button>button1</button><button>button2</button>  
<p>段落1</p>  
<p>段落2</p>  
</body>  
</html>

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

<a href="#1" rel="prev">prev</a>
<a href="#2" rel="next">next</a>
a[rel="prev"]{}
a[rel="next"]{}

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

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

1.table布局

2.css布局：

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

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

③弹性布局(弹性盒子)

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

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

以上是你需要了解的html标签和页面布局的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

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

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

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：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

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

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通过脚本控制网页行为，实现动态和交互功能。

See all articles