html基础知识技巧（动态更新）

最新推荐文章于 2024-07-08 09:04:11 发布

alsdiuhfeircn

最新推荐文章于 2024-07-08 09:04:11 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css 文章标签： html学习笔记 html布局 html语言 html技巧

本文链接：https://blog.youkuaiyun.com/alsdiuhfeircn/article/details/90673751

html+css 专栏收录该内容

10 篇文章

订阅专栏

该博客分享HTML学习内容，包含常用网页背景参数，如background和color；介绍多种HTML布局，像float、flex等布局方式及文字居中等技巧；讲解HTML语言相关知识，如伪元素语法、引号使用等；还提供了学习资源，如w3school网站。

一、常用的网页背景参数

background: #f6f6f6;

color: #778899；

二、html布局：

常见布局：

1.float布局；flex布局；position布局；自然布局（默认元素都是向左的）

2.<h5>已经定义了字体与大小。想要变颜色你可以这样写 <h5><span></span><h5>

3.浏览器默认字体最小是12px，更小需要用到-webkit-transform: scale(0.9);-ms-transform:scale()(-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。)

4.对于一些浏览器而言margin与padding是有默认值的，此时在网页开发中用 margin:0 padding:0可以清除不同浏览器上的这些默认值。

5.为内容追加样式：如下代码

$("selector").addClass("className1 className2");//addClass()与toggleClass（）用法一样

6.padding: 是指内容元素与div框的填充。如果height:60px;line-height:60px可以实现文字垂直居中的效果，结果存在padding-top:20px而没能达到居中，可以用[（height+padding-top）/2-padding-top]*2的值作为line-height的参数，从而实现文字垂直居中的效果。

7.默认布局：static没有定位，元素出现在正常的流中，忽略 top, bottom, left, right 或者 z-index 声明。
relative布局：生成相对定位的元素，相对于其正常位置进行定位
fixed布局：生成绝对定位的元素，相对于浏览器窗口进行定位
absolute布局：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
采用absolute可以实现1000*600cm、140w 、220V 50Hz三行对齐

8.text-align:center如果不能实现文字水平居中，那就用margin ：0 auto来实现

三、html语言

1，::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法。

2，<p style=" ">xxx<span style=" ">ooo</span></p>可以实现一行文字有不同种样式（两种）

3，单引号与双引号可以相互替换但不能重复嵌套，" "双引号里面的字段会经过编译器解释，然后再当作HTML代码输出；而' '单引号里面的不进行解释，直接输出。

4，<input>标签下的reset作用：定义重置按钮。重置按钮会清除表单中的所有数据。

              <form action="form_action.asp" method="get">
                 <p>First name: <input type="text" name="fname" /></p>
                 <p>Last name: <input type="text" name="lname" /></p>
                <input type="submit" value="Submit" />
              </form>

5，HTML 表单中有两种类型的单元格：表头单元格 - 包含表头信息（由 th 元素创建）标准单元格 - 包含数据（由 td 元素创建） th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

6，$("div").innerHtml 与$("div").innerText :前者获取html语句<span>i love you</span>，后者获取文本内容i love you

$("div").html() 与$("div").text() :同上

如果<div></div>里有<input value="xxx"/> 是通过$("div").find("input").val()来获取input标签里的内容的