web前端之html_day1

1html结构

    <!DOCTYPEhtml>

<htmllang="en">

<head>

    <meta charset="UTF-8">

    <title>html结构</title>

</head>

<body>

    “主体结构”

</body>

</html>

    <!DOCTYPE html>     告诉浏览器当前文档类型(html

    <html></html>      根标签

    <head></head>        定义了头部

    <title></title>        网页的名称(标题)

    <body></body>     网页主体(网页中看到的所有信息都放在body标签中)

2html标签关系分类

    HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级.

容器级的标签:里面可以放置任何东西。

文本级的标签里面:只能放置文字、图片、表单元素。

    文本级标签:pa

    容器级标签:h

    嵌套标签(父子关系)

        <head>

            <title></title>

</head>

    并列关系

        <head></head>

<body></body>

3html标签分类

    双标签(有开始,有结束)

<head></head>

    单标签:只有开始标签,没有结束标签

4、单标签

    a.文本注释标签:

<!--- 文本注释内容 --->(快捷键: Ctrl+/)

    b.横线标签

<hr />

    c.换行标签

<br />

5、双标签

    a.标题标签

<hn></hn> n:1-6

        取值越大,字体越小。切记:没有h7以后的标签

    b.段落标签

        <p></p>

    c.字体标签

        <fontcolor="red" size="30px"></font>

    d.文字加粗

        <strong></strong>

        <b></b>

    e.文字斜体显示

        <em></em>

        <i></i>

    f.下划线

        <ins>下划线</ins>

        <u></u>

    g.删除线

        <del>原价880</del>

        <s></s>

6、图片标签

    <img src="" alt=""title="" width="" height="">

    src     图片的名称/图片的路径

    alt     图片无法正常加载的时候,对图片的说明

    title   当鼠标放到图片上显示的文字

    width   设置宽度

    height  设置高度

7、超链接

<a href="http://www.baidu.com">百度</a> 实现网页之间的跳转

         鼠标放到超链接上显示的文字:

<a href="http://www.baidu.com" title="这是百度">百度</a>

    锚链接:

        a.在页面中写一个超链接

<a href="#shaw">找百度去</a>

        b.给任何一个标签id取值和a标签中的 href取值一样

<p id="shaw">我是百度</p>

    总结:实现在本页面中跳转

target='_blank'     在新窗口中打开页面

    优化写法:

<basetarget="_blank">  #这么写

</head>

<body>

    <ahref="http://www.baidu.com">百度</a>

</body>

</html>

 

 

 

8、特殊符号

    大于号 >     &gt;

    小于号 <     &lt;

    空格         &nbsp;

9、列表

    a.无序列表

    <ul>

<li></li>   列表项

</ul>

        例如:type默认为实心圆

<ul>

<li>shaw</li>

<li>sam</li>

<li>stiven</li>

</ul>

        Type属性:circle    空心圆

        Type属性:square    实心正方形

    b.有序列表

<ol>

<li></li>   列表项

</ol>

        例如:type默认为数字

把大象放冰箱,需要几步

<ol>

<li>打开冰箱门</li>

<li>把大象放进去</li>

<li>关上冰箱门</li>

</ol>

        Type属性:type="I"  条状I II III

        Type属性:type="1 | A | a | I"

        Type属性:type="a" start="2"表示序列类型为小写字母,排序从第二个开始

    c.自定义列表

<dl>

<dt></dt>   标题

<dd></dd>   用法和li一样

</dl>

 


你可能感兴趣的:(html,标签)