美文网首页
html入门

html入门

作者: 心中愁眼前秋 | 来源:发表于2017-10-09 11:25 被阅读0次

[TOC]

HTML_2.png

html结构

div布局,css控制。htm是一种标记语言。

查看网页的时候,选择审查元素、查看背景图像。
保存图片——>source->img->在新的tab打开,另存为。
div#test1 div的id为test1
ul#art>li*4>a>{文章$} ul下嵌套4个li,里面装着a标签,文章$符号代表

div布局

画一个田字格

<style>
    #lside{
        float: left;
        background: gray;
    }
    .two{
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
        background: pink;
    }
    #clr{
        clear: both;
        width: 0px;
        height: 0px;
    }
    .sec{
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
        background: pink;
    }
</style>
</head>
    <body>
    <div id="lside">
    <div class="two"></div>
    <div class="two"></div>
    <div id="clr"></div>
    <!-- 清除浮动,不占位,但是从这里开始的下一个div为下一行-->
    <div class="sec"></div>
    <div class="sec"></div>
    </div>
    </body>

画一颗圣诞树

<style>
    .a,.b{
        width: 0px;
        height: 0px;
        border-top: 80px solid transparent;
        /*边框透明 */
        border-right: 80px solid transparent;
        border-bottom: 80px solid pink;
        border-left: 80px solid transparent;
    }
    .b{
        margin-top: -100px;
        /*margin可以是负数,让两个div有重叠*/
    }
</style>

盒子模型:上右下左,没有就取对边
padding 注意事项:padding不能解决的用blockquote来解决

css控制效果####css的引入方式

链接到一个外部样式表:link
内部样式表:style
内联样式:在标签中使用样式属性

颜色的写法

16进制,color:#234566
10进制,color:rgb(240,23,45)
html提供常用颜色的名称 color:orange
简写:EEEEEE->EEE

注意事项

浮动的时候,不设置浮动那么默认换行。在进行此操作的时候把格局内的每个元素都要创建出来。
浮动的上面一层是飘的,父布局不会因此被撑大。所以需要给父布局一个宽高。
利用行高来实现文字竖直居中:line-height 上下居中,这个值和高度一样。和16px/36px是一样的,不过这个兼容性更好。
css代码,布局都居中
margin: 300px auto; text-align: center;

html标签

- 独占一行 能设宽高 竖直方向的margin,padding
块状元素 有,可以设置
内联元素 没有,也不可以设置

内联元素与块状有关,可以通过display相互转换。
display:block;display:inline;

a标签 href属性表示超链接的地址,#默认的地址。
div标签 id属性


d07fe94b-69a7-4703-ad74-01aa9fd95b52.png

<video>里面的controls属性提供播放、暂停和音量控件

<span data-wiz-span="data-wiz-span" style="font-size: 1.5rem;"><audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></span>

表单

874d8b85-2aea-49af-9d1e-6f65e57e665f.jpg
<form action="www.baidu.com" method="post"> 表单的开头,post表示密文传输
checked selected 表示默认添加

框架

<frameset cols="25%,25%,50%>
<frameset rows="25%,50%,25%">
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>

IE bug及兼容测试

有些布局、样式要明确的声明,不然就很大可能出现兼容的问题。例如谷歌字体默认最小是10px,火狐默认是12px。

IE问题下bug的几种常见原因:

错误 原因 解决方法
———— doctype代表了不同的模式 正确声明doctype
在不同浏览器下css效果不同 各浏览器对不同标签的初始化不同 css初始化
—— 浏览器标签bug引起 css hack
盒模型bug 使用严格doctype声明
IE下 左浮元素,左margin是定义的两倍。 双倍margin bug 把display:inline
IE下 a相对于a:link
3像素margin bug 规范浮动与清除浮动
定义特别小的元素的时候,老式浏览器可能会画出比较大 IE的最小限制 overflow:hidden

相关文章

网友评论

      本文标题:html入门

      本文链接:https://www.haomeiwen.com/subject/nuiuyxtx.html