HTML、CSS基础知识及实用技巧(更新中~)

HTML、CSS基础知识:

1、HTML是指 超文本标记语言(Hyper Text Markup Language)。
2、Web 标准的制定者是 万维网联盟(W3C)。
3、添加背景颜色 <body bgcolor="yellow">
4、产生粗体字的 HTML 标签:<b>;产生斜体字的 HTML 标签:<i>;产生超链接的HTML标签:<a href="https://blog.csdn.net/zag666">beginnerZhang</a>;产生电子邮件链接: <a href="mailto:xxx@yyy">;产生复选框的 HTML 标签:<input type="checkbox">;产生文本框的 HTML 标签:<input type="text">;插入背景图像的 HTML 标签<body background="background.jpg">
5、默认的被链接文档会在原有的窗口中打开的,想要在新窗口打开链接:<a href="url" target="_blank">
6、空链接:指向链接后,鼠标变成手形,但单击后仍停留在当前页面:<a href="#">链接文字</a>在浏览器中最终显示效果为链接文字
7、图片链接:<a href="https://profile.csdnimg.cn/C/5/4/1_zag666"><img src="/static/img/logoAD.gif" alt="图片链接" width="32" height="32"></a>图片作为链接:图片链接
8、doctype 声明是不区分大小写的。
9、
在这里插入图片描述
10、元素溢出overflow:①visible:(默认值)内容不会被修剪,会呈现在元素框之外;②overflow:scroll;内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容;③overflow:hidden;内容会被修剪,并且其余内容是不可见的;③overflow:auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容;④overflow:inherit;规定应该从父元素继承 overflow 属性的值(任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”)。
11、改变鼠标样式:

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

12、创建横向导航栏:①display:inline ;②li { float:left; }
13、html居中布局方法:https://www.w3cschool.cn/css/css-center.html
14.浏览器兼容问题:

  • -moz代表firefox浏览器私有属性
  • -ms代表ie浏览器私有属性
  • -webkit代表safari、chrome浏览器私有属性
  • -o代表Opera浏览器私有属性

例如:

        -webkit-transition: all .07s linear;
		-moz-transition: all .07s linear;
		-ms-transition: all .07s linear;
		-o-transition: all .07s linear;
		transition: all .07s linear;/*必须写在最后,因为后覆盖前*/

15.border-radius:100px/10px;
圆角:水平半径100px,竖直半径10px;
16.css动画:animation不需要事件触发,transition需要事件触发。
17.div标签独占一行,而span标签不是。
18.设置首行缩进:text-indent:length(定义固定的缩进。默认值:0 例:2em;em是缩进当前字体文本的尺寸,即段落前空两格)/%(定义基于父元素宽度的百分比的缩进)/inherit(规定应该从父元素继承 text-indent 属性的值);
19.让页面宽度强制适应设备宽度,且初始化缩放比例是1:
<meta name="viewport" content="width=device-width" initial-scale="1">
20.当用到好几个类时,他们既有相同的地方,又有不同的地方,此时可以把类名设置成
class="a b1"class="a b2"class=“a b3”;其中属性a用来定义相同的属性,bi用来定义不同的属性。
21.当点击<a href="#">时,默认回到网页顶部位置;当<a href="#C1">时,回到<a name="#C1">的位置。
22.自动 HTML 表单验证:如果表单字段是空的,添加required 属性防止表单被提交。更多关于表单的细节:HTML表单
23.下拉列表选项option里不能放置其他任何元素结点,只能放置文本。
24.draggable="true"表示元素支持拖动(默认的情况下,图片和超链接元素是支持拖动的,其他元素不支持)。
25.事件冒泡是指,某个事件触发了某个元素的事件处理程序,接下来,就会自动沿着节点树往根节点的方向依次触发经过的路径上的所有元素的某个事件的处理程序。
停止方法:在子元素的事件处理程序的最后一行添加:
window.event?window.event.cancelBubble=true:event.stopPropagation();

HTML、css编写中一些不错的小技巧:

1、快捷键:Ctrl+shift+d:直接快速复制本行内容到下一行;tab:缩进;shift+tab:退格。
2、快捷键:Ctrl+Alt+down(下键):同时控制多行内容编写。
3、快捷键:shitf+up/down/left/right实现上下左右移动鼠标选中范围。
4、&lt; &gt;在浏览器中最终显示效果为< >,因为在 HTML 中不能使用小于号(<)和大于号(>)。
5、<del>blue</del> <ins>red</ins>在浏览器中最终显示效果为blue red
6、<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>在浏览器中最终显示效果为

该段落文字从右到左显示。

7、预格式文本 <pre></pre>标签中文字怎么写的就怎么输出。
8、 标签可实现缩写功能,例如
<abbr title="etcetera">etc</abbr>
<acronym title="World Wide Web">WWW</acronym>

在浏览器中最终显示效果为etcWWW(鼠标移上时显示其全称)。
9、img.class名{ }可描述图片的css样式。

img.normal {height:auto;}
<img class="normal" src="ss.png"/>

10、让段落的第一个字母浮动到左侧:https://www.w3cschool.cn/tryrun/showresult/showhtml.html?x=0.8172607688433504
11、为超链接添加不同样式 :https://www.w3cschool.cn/tryrun/showresult/showhtml.html?x=0.21379144053050503

HTML实体

有一些字符在HTML文档中有特殊的含义,例如< 和> 字符,所以要在内容中使用这些字符而不被解释为HTML,可以使用HTML实体,实体是浏览器替换特殊字符的代码。下面是一些常用的例子:
在这里插入图片描述
如需完整的实体符号参考,请访问w3cschool 符号实体参考手册:https://www.w3cschool.cn/htmltags/html-symbols.html

如果完成了HTML的学习,下一步该干什么可以参照w3cschool:https://www.w3cschool.cn/html/html-summary.html#

发布了100 篇原创文章 · 获赞 240 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/zag666/article/details/88957621