美文网首页
2018-10-29 Day01-html基础

2018-10-29 Day01-html基础

作者: EryangZ | 来源:发表于2018-10-29 20:36 被阅读0次

00-html基础认识

<!--
 1.web标准:
     a.结构标准(html):决定网页中的内容
     b.表现标准(css):决定网页中的内容的布局和显示样式
     c.行为标准(JavaScript):决定网页中的行为和动作(只要网页中有变化就要用到js)
 
 2.html
     a.什么是html语言
         html:超文本标记语言
         标记语言:通过不同的标记来显示不同的内容(以指定的格式来显示不同的内容)
         超文本:除了文本以外还可以标记图片、超链接、音频、视频、flash、输入框、按钮等等
         
    b.什么是html文件
        html文件就是后缀是.html的文件,html文件可以直接用浏览器打开,看到网页效果
    
    c.html结构
        html基本结构是一个html标签中包含两个平行的head标签和body标签
        head中的内容除了标题title和图标icon以外其他设置的内容都不可见,body就代表了网页的内容部分,里面的标签一般都是可见的
        <html>
            <head>
            </head>
            <body>
            </body>
        <html>
        
    d.html版本
        html5 -- html
        
    注意:html中大小写不敏感
-->




<!-- 代表html版本 -->
<!DOCTYPE html>

<!-- html的基本结构 -->
<html>
    <head>
        
        <!-- head的子标签,在这儿是设置的字符编码方式(功能很强大) -->      
        <meta charset="utf-8" />
        
        <!-- 设置网页标题 -->
        <title>二扬</title>
    </head>
    <body>
        
    </body>
</html>

01-html标签

<!-- 
标签 == 标记
1.标签语法
    双标签(常规标签):<标签名 可以跟属性名1:属性值1 属性名2:属性值2...> 标签内容 </标签名>
    
    单标签:<标签名  属性名1:属性值1 属性名2:属性值2.../> 或者  <标签名  属性名1:属性值1 属性名2:属性值2...>

说明:
    a.标签名是html中已经有的标签,不能自己随便命名
    b.开始标签的<和标签名还有/之间不能有空格
    c.双标签放在开始标签内,属性和属性值用:连接,多个属性之间用空格隔开,属性没有位置要求
    d.标签内容,双标签才有标签内容,在开始标签和结束标签之间,标签的内容可以使任意(文本、其他标签)
    
2.head标签中的内容
    a.title:设置网页标题
    b.base
    c.link
    d.meta:
        设置网页元数据(单标签),charset设置编码方式
        name:           content:
        keywords        包含网页的关键字,逗号隔开
        description     告诉搜索引擎网站的内容
        author          标注网页作者
        viewport        设置浏览器网页的窗口
        robots          设置爬虫的方式:none noindex nofollow all index follow
        等等......了解
        
    e.style
    f.script
    
3.body标签
    body中的标签主要用来在网页中的内容添加数据或者显示信息的

 -->
 
 <!DOCTYPE html>
 <html>
    <head>
        <!-- 设置网页标题 -->
        <title>二扬的标签</title>
        
        <!-- 设置编码方式 -->
        <meta charset="utf-8"/>
    </head>
    <body>
    
    </body>
 </html>

02-body_文本标签

<!-- 
1.标题标签
2.段落标签:一段文字就是一段p标签,一个段落使用一个p标签
3.特殊符号标签:
    a.换行<br>
    b.空格符号&nbsp;
 -->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>文本标签</title>
    </head>
    <body>
        <!-- 
        1.标题标签:h1-h6
        h1 - 大标题
        h2 - 副标题
        h3 - 副标题下的副标题
        h4-h6以此类推
         -->
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
        <h5>我是标题5</h5>
        <h6>我是标题6</h6>
        
        <!-- 
        2.段落标签:p标签
        每个p标签中的内容显示完后会自动换行
         -->
        <p>哈哈哈,我是第一段文字</p>
        <p>我是第二段文字</p>
        <p>我是第三段文字我也是最长的一段文字</p>
        a.我是直接写的内容,没有用p标签
        b.我也是直接写在网页中的内容
        c.这样我的我本来是三段,但是在网页中会被连在一起,所以要用p标签
        
        <!-- 
        3.特殊功能标签,在html文本中的换行、空格、tab等都是无效的(空白无效) 
        换行:<br>(单标签)
        空格(符号):&nbsp;
        table:&emsp;
         -->
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;床前明月光,<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;疑是地上霜。<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举头望明月,<br>
            &emsp;&emsp;低头思故乡。<br>
        </p>
        
        <!-- 
        4.字体相关标签
         加粗:<b>(只是加粗)   <strong>(不仅加粗还有强调作用)
         倾斜:<i>    <em>(带有强调)
         水平线:<hr>(单标签)
         
         -->
         
         <!-- <hr>的功能是水平线 -->
        <hr >
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>床</b>前明月光,<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;疑<strong>是地</strong>上霜。<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>举</i>头<em>望</em>明月,<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><em>低头</em></strong>思故乡。<br>
        </p>
    
    
    </body>
</html>

03-body_列表标签

<!-- 
 列表标签:
    a.有序列表
      ol标签:代表整个列表
      li标签:代表列表中的元素
    b.无序列表
      ul标签
      li标签
    c.自定义列表
      dl标签:代表整个列表
      dt标签:分组名
      dd标签:分组中的内容
    
    
 -->
 
 
 
 
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- 
        有序列表 
        ol标签 - 代表整个列表
        li标签 - 代表列表中的元素
        -->
        <ol>
            <li>基础语法</li>
            <li>web前端</li>
            <li>web后端</li>
            <li>数据和人工智能</li>
            <li>项目阶段</li>
        </ol>
        
        <!-- 
        无序列表 
        ul标签 - 代表整个列表
        li标签 - 代表列表中的元素
        -->
        <ul>
            <li>python人工智能</li>
            <li>HTML5</li>
            <li>Java大数据</li>
            <li>自动化测试</li>
        </ul>
        
        <!-- 
        自定义列表 
        dl标签 - 代表整个列表
        dt标签 - 分组名
        dd标签 - 分组中的内容
         -->
        <dl>
            <dt>python教学部</dt>
            <dd>余婷</dd>
            <dd>骆昊</dd>
            <dd>王海飞</dd>
            <dt>H5教学部</dt>
            <dd>吴老师</dd>
            <dd>丁老师</dd>
            <dd>周老师</dd>
        </dl>
        
        
        
        
        
    </body>
</html>

04-body_图片标签和超链接

<!-- 
图片标签:img(单标签) 
    a.src属性 - 图片地址(本地图片路径或者网络图片的url)
      本地图片的地址可以使绝对路径也可以是相对路径,一般将图片放在img文件夹中写相对路径
    
    b.title - 设置图片标题(鼠标停留在图片上显示的内容)
    
    c.alt - 设置图片加载失败的提示信息

超链接标签:<a>
    a.内容- 文字 
    b.href - 跳转的目标地址
      网页地址 - 跳转到指定的网页地址
      本地的html文件地址
      空(功能为刷新)
      选择器 - 在当前网页中,跳转到指定的位置(列入返回顶部)
    c.target:跳转的方式,默认为_self 
      _self    在当前页面跳转,原网页被覆盖
      _blank   在新的页面中加载新的网页 ,原网页还在
      
    c.内容 - 图片
    b.href - 跳转到目标地址
      网络地址 - 指定的网页地址
      本地的html文件地址
      空(功能为刷新)
      选择器 - 在当前网页中,跳转到指定的位置(列入返回顶部)
        #top 回到顶部
        #id数字 回到文本标签id的位置
-->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
    <!-- 
     1.图片标签:img(单标签)
    -->
        <!-- <img src="./img/king.png" title="金木研" alt="加载失败" > -->
    
    <!-- 
    2.超链接标签:<a>
     -->
     
    <!-- 文字超链接 -->
    <a href="https://www.baidu.com/">百度一下</a>
    <!-- 图片超链接 -->
    <a href="https://www.baidu.com/" target="_blank"><img src="img/king.png" ></a>
    <p>第二张图片</p>
    <a href="https://www.baidu.com/" id="2"><img src="img/king.png" ></a>
    <!-- 本地超链接 -->
    <a href="03_body列表标签.html">列表标签</a>
    <!-- 什么都不写的超链接,功能为刷新 -->
    <a href="">点我</a>
    <!-- 选择器 -->
    <a href="#top">回到顶部</a>
    <a href="#2">第二张</a>
    </body>
</html>

05-body_表格数据

<!-- 
表格:
    1.table标签 - 整个表格
      tr - 代表的行
      td- 代表的列
    
    2.表格边框双管的属性
    border - 大的小的单元格都有一个边框
    bordercolor - 颜色的值可以是英语单词也可以是RGB对应的十六进制值
    cellspacing - 单元格与单元格还有边框的距离
    cellpadding - 单元格内容与其边框内边距
    align - 表格的对齐方式,通常为left right center
      在table设置的时候回让表格在网页居中,在tr中设置会让
    
    3.背景颜色对应的属性
    bgcolor - 设置整个表格或者一行或每一个单元格的背景颜色 
    
    4.宽度和高度
    width - 宽度
    height - 高度  
      a.作用于table - 设置整个表格的宽度和高度,他会根据内容按比例去分配高度和宽度
      b.作用于tr - 让整行单元格内容居中
      c.作用于td - 让单个单元格内容居中
    
    5.合并单元格
    colspan 合并列
    rowspan 合并行

-->   



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>表格</title>
    </head>
    <body>
        <table border="1" bordercolor="pink" cellspacing="0" cellpadding="5">
            <tr align="left" bgcolor="antiquewhite">
                <td>FirstName</td>
                <td>LastName</td>
                <td>Points</td>
            </tr>
            <tr align="center" bgcolor="cadetblue">
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr align="right">
                <td bgcolor="honeydew">ErYang</td>
                <td bgcolor="hotpink">FF</td>
                <td bgcolor="chartreuse">100</td>
            </tr>
        </table>
        <br>
        <!-- 
        设置细线表格
        1.设置整个表格的背景颜色,也就是边框的颜色,再设置每个单元格的颜色(表格内容的颜色),要与背景颜色不一样
        2.设置cellspacing的值为边框的宽度
        -->
        <table bgcolor="black" width="300" height="200" cellspacing="1">
            <tr bgcolor="antiquewhite">
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr bgcolor="antiquewhite">
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="antiquewhite">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <br>
        <!-- 设置表格的宽度和高度 -->
        <table bgcolor="black" width="300" height="200" cellspacing="1" cellpadding="20", align="center">
            <tr bgcolor="antiquewhite" height="40" align="center">
                <td width="100">姓名</td>
                <td width="80">年龄</td>
                <td width="50">性别</td>
            </tr>
            <tr bgcolor="antiquewhite">
                <td align="center">二扬</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr bgcolor="antiquewhite">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        
    </body>
</html>

06-body合并表格

<!-- 
制作复杂表格的方法
  a.确定表格的最大行数,在table中用tr表示出来
  b.确定每一行有多少单元格,用td表示出来
  c.确定每一个单元格是否有合并现象,如果是行合并,就设置rowspan,如果是列合并就设置colspan


-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>复杂表格</title>
    </head>
    <body>
        <table bgcolor="antiquewhite" width="600" height="400">
            <tr bgcolor="aliceblue">
                <td colspan="2"></td>
                <td colspan="4"></td>
            </tr>
            <tr bgcolor="aliceblue">
                <td></td>
                <td></td>
                <td rowspan="3" colspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr bgcolor="aliceblue">
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="aliceblue">
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr bgcolor="aliceblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
        </table>
    </body>
</html>

相关文章

网友评论

      本文标题:2018-10-29 Day01-html基础

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