PythonWeb第一天

不加盐的糖先生

于 2019-05-27 19:00:22 发布

阅读量149

点赞数

分类专栏： PythonWeb 文章标签： html5学习

本文链接：https://blog.csdn.net/weixin_44808711/article/details/90609557

版权

PythonWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端简单介绍

文章目录

前端简单介绍

–day01学习笔记

1.Web开发

网页,交由浏览器运行的程序
组成:HTML(结构) css(修饰) JavaScript(脚本语言)
开发前准备: 编辑器运行环境(浏览器Chrome FireFox) 调试工具:浏览器自带开发者工具
浏览器分类:

按照浏览器内核(引擎:1.渲染页面,2.JS代码解析):Chrome Firefox Safari IE/Edge Opera

使用HTML的标签来显示结构
页面布局修饰元素的显示外观 -->CSS
动效 -->JS

2.HTML(超文本标记语言(Hyper Text Markup Language))

1.超文本标记语言,通过标签/标记的形式书写网页结构并且填充内容
2.标签语法

双标签: 有开始有结束,成对出现

      <标签名>标签内容</标签名>  <b></b>

单标签: 只有开始,没有结束,允许手动添加'/'表示闭合

      <标签名> <img>   <img/>(手动添加闭合)

3.语法规范:

标签不区分大小写,推荐全小写
双标签如果少闭合,浏览器会自动添加闭合标签
浏览器只能识别标签,如果写在HTML标签外部的内容都不识别,会原样输出到窗口中
浏览器会忽略代码中多余的换行和空格,一律解析为一个空格字符

3.常用标签介绍

                            cookie:注意:1em=16px,小于12像素的字体一律按照12

段落

* `<!--html大小写不敏感,推荐使用小写 -->
<!--html5的文档类型声明 -->
<!doctype html>
<!--文档开始 页面中所有的内容都应该写在HTML标签中-->
<html>
    <!--文档头部,可以设置小图标,网页标题显示在浏览器选项卡上;还可以引入资源文件,设置网页相关的信息-->
    <head>
        <!--设置网页标题-->
        <title>我的第一个网页</title>
        <!--meta标签可以用于设置网页附加信息,网页编码类型,关键字,网页描述,开发人员信息等,借助于标签属性定义-->
        <meta charset="utf-8">
    </head>
    <body>
        网页主体:所有给用户看的内容都应该写在body中,会渲染在浏览器窗口中
    </body>
</html>
<!--文档结束-->`

标题
普通
格式

<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 -->
<head>
<!-- 设置网页标题,显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分,显示网页主要内容 -->
<!--标题通过HTML标签属性调整样式,不具有通用性-->
<body bgcolor="#00BFFF">
    <!--锚点链接:链接至当前页面的指定位置-->
    <a href="#5">5.人物经历</a>
<!--在元素尺寸范围内-->
<h1 align="center">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--允许自定义标签,自定义标签属性-->
<h7 aa="bb">自定义</h7>

<!--段落-->
<p>段落文本</p>
<!--字符实体
&lt;"<"
&gt;">"
&copy;版权符号©
&yen;人民币符号"¥"
&nbsp;空格
-->
<h1>HTML5&ltDay01&gt</h1>
<h1>版权所有&copy;价格&yen;</h1>
<h1>©&nbsp;&nbsp;&nbsp;&nbsp;£</h1>
<!--普通文本-->
<!--行分区标签,特殊文本特殊处理-->
<span>span</span>
<label>label</label>
<b>bold加粗</b>
<!--"break换行-->
<br>
<!--水平分割线-->
<hr>
<strong>strong加粗</strong>
<i>italic斜体</i>
<u>underline下划线</u>

<p>
    已选择
    <span>10</span>
    件商品
</p>
<!--容器标签-->
<!--div用于页面结构划分-->
<div>导航栏</div>
<div>页面主体</div>
<div>页面底部</div>
<!--定义锚点 name属性设置锚点名称,自定义锚点链接中,地址使用#(锚点的标志)
跟上锚点名称<a href="#5">5.人物经历</a>-->
<a name="5"></a>



</body>
</html>
<!-- 文档结束-->

列表标签

<!doctype html>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
</head>
<body>
<!--1.有序列表,默认以阿拉伯数字标识列表项-->
<!--type属性用于设置列表的项目符号,有序列表默认使用数字,可以修改为"a","A","i","I"-->
<ol type="A">
<li>四大名著</li>
<!--页面下拉菜单使用列表嵌套实现,只能使用父子关系嵌套-->
<ul type="square">
        <li>三国演义
            <ol>
                <li type="circle">孙权</li>
            </ol>
        </li>
        <li>红楼梦
            <ol>
                <li>王熙凤</li>
            </ol>
        </li>
        <li>水浒传
            <ol>
                <li>卢俊义</li>
            </ol>
        </li>
        <li>西游记
            <ol>
                <li>文殊菩萨</li>
            </ol>
        </li>

    </ul>
<li>list item2</li>
<!--2.无序列表(unordered list),默认以实心圆点标识列表项,type可取circle(空心圆),square(实心方块),none(取消项目符号)_-->

<ul type="circle">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>

</ul>
</ol>
</body>
</html>
<!-- 文档结束-->

图片与超链接

显示图片

<!doctype html>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
</head>
<body>
<!--图片标签:使用src属性设置图片路径,默认按照原始尺寸显示在网页中,可以手动调整图片尺寸-->
<img src="img/lv2.gif" title="我律二" width="600px" height="600px">
<!--标签属性书写在开始标签中,
    用于补充说明当前的标签内容或者修饰元素的样式
为原始添加额外的标签,标签属性有书写名和属性值组成,
多个标签属性之间使用空格隔开-->
<!--设置宽高,缺少方向会等比例缩放-->
<!--title属性用于设置鼠标悬停在图片上时显示文本-->
<!--alt属性用于设置图片加载失败时的提示文本-->
<img src="img/lv23.gif" width="600px" height="600px" alt="我律二">
<img src="img/lv24.gif" width="600px" height="600px">
<img src="img/lv25.gif" width="600px" height="600px">
<img src="img/lv26.gif" width="600px" height="600px">
<img src="img/lv27.gif" width="600px" height="600px">
</body>
</html>
<!-- 文档结束-->

显示超链接

<!doctype html>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
</head>
<body>
<!--用户名可以点击超链接,跳转至其他的资源文件-->
<!--href属性必填,用于指定链接地址,网络路径必须写协议
target属性选填,用于设置目标文件的打开方式(_self),默认在当前窗口打开,
可以设置新建窗口打开(_blank)-->
<a href="03_img.html" target="_blank">图片文件</a>
<a href="http://www.baidu.com">百度1</a>
<!--图片超链接-->
<a href="03_img.html">
    <img src="img/happy.gif">
</a>
<!--href 的特殊取值-->
<!--空表示刷新-->
<a href="">href=""</a>
<!--#表示锚点,链接至本页,不会造成刷新,修改URL-->
<a href="#">href="#"</a>
<!--javascript:void(0)表示阻止超链接默认的跳转功能,运行自定义点击事件-->
<a href="javascript:void(0)">javascript:void(0)</a>

</body>
</html>
<!-- 文档结束-->

表格

<!doctype html>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
</head>
<body>
<!--表格由结构化的行和单元格组成,用于数据的展示或者辅助排版-->
    <!--单元格合并,为单元格添加属性
    colspan:跨列合并
    rowspan:夸行合并
    取无单位的数值,表示包含自身在内合并几个单元格
    发生单元格合并,要删除被合并的单元格以保证结构完整-->
    <table border="1px" width="300px" height="300px">
        <tr>
                <td colspan="2">示例</td>
                <!--删除被合并的单元格-->
                <td>示例</td>
        </tr>
        <tr>
                <td>示例</td>
                <td rowspan="2">示例</td>
                <td>示例</td>
        </tr>
        <tr>
                <td>示例</td>
                <!--删除被合并的单元格,保证结构完整-->
                <td>示例</td>
                
        </tr>
    </table>
    <!--表格行分组:
        可将表格中的若干行划分为一组,表示表头,表尾和表格主体
        默认情况下,所有的行都会自动添加到tbody(表格主体)中显示-->
    <table border="2px" width="300px" height="300px">
        <!--thead划分表头-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
    
        </thead>
        <!--tfoot表尾-->
        <tfoot>
            <tr>
                <td colspan="2">合计:</td>
            </tr>
        </tfoot>
        <!--tbody表格主体-->
        <tbody>
            <tr>
                <td>LQ</td>
                <td>30</td>
            </tr>
            <tr>
                <td>LQ</td>
                <td>30</td>
            </tr>


        </tbody>


    </table>
</body>
</html>
<!-- 文档结束-->