day21

作者: 木偶演员 | 来源:发表于2018-08-13 20:45 被阅读0次

01 HTML

一.web基础:
1.结构标准 HTML 决定网页上显示的内容
2.表现标准 css 决定网页内容地布局和显示方式
3.行为标准 JS 决定网页的动态效果
4.

二.HTML 超文本标记语言(可以用来标记文本,图片,视频,音频,按钮,输入框)
HTML不是编程语言,不会编译执行,语法错误也不会报错导致程序无法运行,只是单纯的无法显示你想表现得文本格式

三.HTML的版本
H5 广义:指HTML5+CSS3+js 狭义:HTML5

四.HTML编程
a. HTML标记语言对应的文件后缀,一般都是html(格式即说明就是打开方式的不同,)
b. HTML的结构 整个HTML都有的不同的标签组成

五.标签\标记
通过不同的标记,让文本在浏览器上不同的样子表示
1.常规标签/常规标签
a. <标签名 属性 = 属性值 属性= 属性值> 标签内容 </标签名> ----完整标签 双标签
b.单标签 <标签名 属性= 属性值 属性= 属性值 /> 还可以不需要最后的斜杠

说明:
标签名: 标签名是HTML固定的,
属性: 属性和标签名用空格隔开,一属性=属性值的形式存在,多个属性之间可以用空格隔开
属性可以是自定义的 ,
标签内容: 是指结束标签和开始标签之间的内容,可以是任何内容

补充: 在HTML中,不区分大小写

网页的结构:

 <!DOCTYPE HTML > <!--对html版本进行说明, 默认版本即HTML5--> 
 <html>
    <head>
        <meta charset="utf-8" />  <!--设置编码方式-->
        <style></style>
        <link rel="stylesheet" type="text/css" href=""/>
        <script type="text/javascript"> </script>
        <base />

    </head>
    <body>  <!--负责网页的显示部分-->
        <h1>文本标签</h1>
        
        <p>
            yiyiyiyiiyiyiyiyiyiyiyiyiyiyiyiyi<!--段落标签,一个p标签对应 一个段落,两个段落就使用多个p标签-->
            
        </p>
    </body>
 </html>

02 列表

列表即有序列表,无序列表,自定义列表
有序列表ol 无序列表ul 自定义列表 dl dt dd


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表相关</title>
    </head>
    <body>
        <!--有序列表
            ol
        -->
        <ol>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
            
        </ol>
        
        <!--无序列表-->
        <ul>
            <li>成都</li>
            <li>重庆</li>
            <li>北京</li>
            
        </ul>
        <!--自定义列表-->
        <dl>
            <dt>城市:</dt>
            <dd>重庆</dd>
            <dd>成都</dd>
            <dd>合肥</dd>
            
        </dl>
        
    </body>
</html>

03 图片和超链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片和超链接</title>
    </head>
    <body>
        <!--1.图片标签
                src属性: 图片的地址(本地地址,网络地址)
                本地地址: 绝对路径,相对路径
        -->
        <img src="地址" alt="图片加载失败后显示的提示信息" title="图片标题" />
        <!--2.超链接
            网页上,点击后可以跳转的标签,都是超链接
            href属性: 跳转的地址(可以是网络地址和本地地址)
            target属性:
                _self 在当前页面打开href的地址
                _blank 在新的页面打开href地址
            a. 点击文字跳转
            b. 
            
            
        -->
        <a href="地址" target=""></>
    </body>
</html>

04 表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        
    </head>
    <body>
        <!--
            1.border: 设置整个表格边框的宽度
            2.width: 设置整个表格的高度(每一行宽度不一样)
            3.height: 设置整个表格的高度(每一行高度一样)
            注意: 所有的属性的值都要用引号
            tr ---height 设置单独的每一行的高度
            设置第一行每一列的宽度 就可以控制整个表格的宽度,
            哈哈哈,九月份出有课,怎么去处理呢?
            先是金鹰大佬的课  很烦啊,去请假吧,然后还有第一节课肯定要去,其他的嘛.再说吧另外一个就是学校安排的实习
            三周,也不知道去干嘛,靠,又不能帮助毕业
            callspacing  设置每个单元格空间
            
            
            
        -->
        <table border="1" width="120" height="100" cellpadding="" cellspacing="0" bordercolor="red">  <!--代表整个表格-->
            <!--tr 代表一行-->
            <!--td 代表是列-->
            <!--一个表格可以有多行,一行有多列-->
            <tr height="150">   <!--第一行-->
                <td>姓名</td>   <!--第一行第一列-->
                <td>成绩</td>
                <td>是否留级</td>
            </tr>   <!--第二行-->
            <tr height="200">
                <td>1</td>  
                <td>1</td>
                <td>1</td>
            </tr>
            
        </table>
    </body>
</html>

相关文章

网友评论

      本文标题:day21

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