从0开始接触html--第一天学习内容总结

changfeng1050 发布于2019-04-23 13:26 / 500人阅读

摘要：第一天总结段落有序无序定义列表块级元素独占一行，行内元素共占一行和和和块级分区元素行内分区元素特殊字符空格小于号大于号图片图片不能正常显示的时候显示此内容路径鼠标悬停时显示的内容图片地图细节文本标签内容标题标

第一天

总结:

h1-h6 p 段落 hr br
有序 ol li 无序 ul li 定义列表 dl dt dd
块级元素：独占一行，h1-h6 p hr div
行内元素：共占一行, em和i strong和b u del和s span
块级分区元素：div header nav article footer
行内分区元素：span
特殊字符：空格：小于号:< < 大于号:> >
图片
图片地图

细节:

文本标签:

h1-h6 内容标题标签，内容独占一行属性：align=left/right/center
p 段落标签内容独占一行
hr 水平分割线
br 换行

代码实现:


DOCTYPE html>
<html>
    <head>
        
        <meta charset="UTF-8">
        
        <title>文本标签title>
    head>
    <body>
        <h1 align="center">我是老大h1>
        <h2 align="right">我是老二h2>
        <h3>我是老三h3>
        <h4>我是老四h4>
        <h5>我是老五h5>
        <h6>我是老六h6>
        <hr>
        <p>我是段落标签1p>
        <p>我是段落标签2p>
        <p>我是段落标签3p>
        开始学习HTML了<br>你开心吗?
    body>
html>

列表标签:

ul 无序列表子标签
ol 有序列表属性:type=1/a/A/i/I reverserd="reverserd" start="10" 子标签
dl 定义列表子标签:
有序列表和无序列表之间可以相互嵌套

代码实现:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签title>
head>
<body>
    <h3>无序列表:h3>
    <ul type="square">
        <li>刘备li>
        <li>貂蝉li>
        <li>项羽li>
        <li>狄仁杰li>
        <li>吕布li>
    ul>
    <h3>有序列表:h3>
    把大象关进冰箱需要几步?
    <ol reversed="reversed" start="10">
        <li>打开冰箱门li>
        <li>把大象装进冰箱li>
        <li>关上冰箱门li>
    ol>
    
    <h3>定义列表h3>
    <dl>
        <dt>凉菜dt>
        <dd>大拌菜dd>
        <dd>花毛一体dd>
        <dd>拍黄瓜dd>
        <dt>炒菜dt>
        <dd>宫保鸡丁dd>
        <dd>木须肉dd>
        <dd>小炒肉dd>
    dl>
    
    <h3>列表嵌套:h3>
    <ol>
        <li>ol1li>
        <li>ol2
        
            <ul>
                <li>第二层1li>
                <li>第二层2li>
                
                    <ol>
                        <li>第三层1li>
                        <li>第三层2li>
                        <li>第三层3li>
                    ol>
                <li>第二层3li>
            ul>
        li>
        <li>ol3li>
    ol>
body>
html>

特殊字符:

空格:
< :<
> :>

代码实现:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字符title>
head>
<body>
我爱     学习<br>
<我爱学习>
body>
html>

分区标签:

分区标签自身没有显示效果，可以充当容器的作用，用于包含多个功能相关元素，可以进行元素的整体控制。
div：块级分区元素，独占一行
span：行内分区元素，和其它行内元素共占一行
开发页面时通常会分为三大区

头部

体部

脚部
H5标准中新增的分区标签作用和div一样但是更直观

　　　　头部

　　　　导航

　　　　文章，正文脚部

代码实现:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级元素和行内元素title>
head>
<body>
<h3>分区标签h3>
    <div>div1div>
    <div>div2div>
    <div>div3div>
    <span>span1span>
    <span>span2span>
    <span>span3span>
    <h3>H5新增分区标签h3>
    <header>头部区域header>
    <nav>导航区域nav>
    <article>正文区域article>
    <footer>脚步区域footer>
body>
html>

图片img:

路径分为两种：

相对路径：访问站内资源使用相对路径 a.图片和页面同一目录，直接写图片名称 b.图片在页面的上级目录, ../图片名 c.图片在页面的下级目录, 文件夹名/图片名
绝对路径：访问其它网站的资源使用绝对路径，以http开头，存在风险，如果目标图片路径发生改变则不能显示

常用属性：

alt: 当图片不能正常显示的时候显示此内容
title：当鼠标在图片上悬停的时候显示此内容
width/height: 设置图片的宽度和高度，可以设置像素px或百分比%，如果只设置宽度则高度等比例缩放

支持的图片格式： jpg/jpeg不支持透明色 png支持透明色 GIF动图

代码实现

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>


 
 
 
<img alt="这是一个美女" src="a.jpg">
<img alt="这是一片风景" title="这是标题" width="50%"  src="../water.jpg">
<img alt="这是一只老虎" width="50%" src="abc/tiger.jpg">
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-152360031.jpg">
body>
html>

图片地图:

常用属性：

shape：形状，常用rect矩形和 circle圆形
coords：坐标矩形四个值(x1,y1,x2,y2) 圆形三个值(x,y,半径)
href: 值为路径，可以写相对路径和绝对路径，路径可以指向页面，也可以指向文件，如果浏览器支持打开此格式的文件则直接浏览（图片，pdf等）如果不支持打开则下载此文件

代码实现:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<img src="a.jpg" width="500px" usemap="#mymap">

<map name="mymap" id="mymap">

<area alt="文字介绍" shape="rect" coords="0,0,100,100" href="demo06.html">
<area alt="文字介绍" shape="circle" coords="200,200,100" href="../water.jpg">
map>
body>
html>

回顾练习:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回顾总结练习title>
head>
<body>
    <h1>这是h1h1>
    <h2>这是h2h2>
    <h3>这是h3h3>
    <h4>这是h4h4>
    <h5>这是h5h5>
    <h6>这是h6h6>
    <hr>    
    <p>段落标签1p>
    <p>段落标签2p>
    <p>段落标签3p>
    测试换行<br>测试换行    
    <h3>无序列表h3>
    <ul type="circle">
        <li>吃饭li>
        <li>睡觉li>
        <li>敲代码li>
    ul>
    <h3>有序列表h3>
    <ol type="1" start="8" reversed="reversed">
        <li>HTMLli>
        <li>CSSli>
        <li>JavaScriptli>
        <li>JQueryli>
    ol>
    <h3>定义列表h3>
    <dl>
        <dt>歌星dt>
        <dd>周杰伦dd>
        <dd>刘德华dd>
        <dd>张学友dd>
        <dt>影星dt>
        <dd>周星驰dd>
        <dd>成龙dd>
        <dd>李连杰dd>
    dl>
    <h3>列表嵌套h3>
    <ul>
        <li>我的订单li>
        <ul>
            <li>全部订单li>
            <li>待付款li>
            <li>待收货li>
            <li>待评价li>
            <li>退货退款li>
        ul>
        <li>我的优惠券li>
        <li>收货地址li>
        <ul>
            <li>地址管理li>
        ul>
        <li>账号管理li>
        <ul>
            <li>我的信息li>
            <li>安全管理li>
        ul>
    ul>
    <h3>分区标签h3>
    <div>div1div>
    <div>div2div>
    <div>div3div>
    <span>span1span>
    <span>span2span>
    <span>span3span>
    <h3>H5新增分区标签h3>
    <header>头部区域header>
    <nav>导航区域nav>
    <article>正文区域article>
    <footer>脚步区域footer>
    <h3>块级元素h3>
    div,h1-h6,p,hr
    <h3>行内元素h3>
    span,<em>斜体em> <i>斜体i>
    <strong>加粗strong> <b>加粗b>
    <u>下划线u>
    <del>删除线del> <s>删除线s><br>
    <h3>图片标签h3>
    <img alt="这是图片" title="图片" width="50%" src="../water.jpg" usemap="#mymap">
    <h3>图片地图h3>
    <map name="mymap" id="mymap">
        <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com">
        <area shape="circle" coords="150,50,50" href="http://www.baidu.com">
    map>
    
body>
html>

GPU云服务器云服务器从0开始学习php php从0开始汇编语言从0开始从0开始数据分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1884.html

技术甜品店 - 收藏集 - 掘金

摘要：前端切图神器前端掘金安装前端的基础工作就是把设计师的设计稿还原成前端页面，所以切图是作为一个前端的基本技能。腾讯 Web 工程师的前端书单 - 阅读 - 掘金作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍。 JavaScript 入门《JavaScript权威指南（第六版）》 ★...

Gilbertat 2019-08-20 16:40 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

caspar 2019-08-15 13:33 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

nihao 2019-08-21 18:39 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

Drummor 2019-06-28 14:38 评论0 收藏0