2018-08-11-Python全栈开发day37-web前端html快读入门

ps：之前看django学习一脸懵逼，因为自己连最基础的html都没有学习，所以也不太可能学习好web，现在要学习好html的编写规则，看得懂而且懂得如何做才好。

1.html

　　首先明确上网的本质就是进行上传和下载。在进入某个网页的时候，是网站的服务器将其的html文件给浏览器，经过浏览器渲染之后呈献给使用的人。想要让浏览器读懂html，需要按照其规则进行编写，实质上html文件也是一种语言，浏览器就是html文件的解释器。

2.html内容

　　2.1表头

　　2.1.1<DOCTYPE html>

　　此为历史遗留问题，为了兼容早年的各种标准，对新模式进行生命，如不声明，则默认使用旧模式进行渲染。

　　2.1.2 lang=en

　　　　表明渲染是以中文为语言

　　2.1.3 meta charst='utf-8'

　　　　　在进行编码时，以utf8进行编码

　　2.2 根标签

　　　　2.2.1 head标签

　　　　　2.2.1.1 meta

　　　　　　meta标签具有http-equiv和name属性

　　　　　　2.2.1.1.1 name

name=keywords

　关键词属性，通过搜索引擎进行搜索时，以这个为关键字，用户搜索关键字中如果有这显示

<meta name="keywords" content="it">

name=description

　　用户进行搜索时显示网页的描述信息，相当于进行简介

<meta name="description" content="it">

　　2.2.1.1.2 http-equiv

http-equiv='Rfresh'

默认进行刷新，两秒钟之后刷新页面并且转到某一网页

<meta http-equiv="Refresh" content="2,www.baidu.com">

http-equiv='content-type'

定义网页的编码

<meta http-equiv="content-type" charset="GBK">

　　2.2.1.2 非meta标签

　　　　2.2.1.2.1 网页图标

<link rel="icon" href="www.baidu.com.123.jpg">

　　2.2.2 body标签

body标签是html的正文，是真正显示在浏览器上的内容

　　　　2.2.2.1 <h1>调整字体大小

　　还有h2,h3,h4等，对应不同的大小

<h1>hello</h1>#字体较大，在浏览器直接显示hello。

　　　　2.2.2.2 <p>

　　　　p内将输入的内容独立一行显示出来，无特别意义

<p>hello</p>

　　　　2.2.2.3<b>

　　　　给标签加粗，效果和<strong>相同

<b>hello</b>
<p>hello</p>

　　　　2.2.2.4<strike>

　　　　给标签内容中间加上横线

<strike>hello</strike>

　　　　2.2.2.5<em>

　　　　标签内容斜体

<em>hello</em>

　　　　2.2.2.6 <sub>

　　　　给标签作为下标角标使用，sup为上角标

<sub>22222</sub>
<sup>22222</sup>

　　　　2.2.2.7hr

<hr>

使用直接直接在浏览器上画一个和浏览器宽度一致的横线

　　　　2.2.2.8 <div>

　　　　div没有特别的特点，但是会很常见的使用，因为可以根据自己的需求给它加上特别的功能，

　　　　如果是使用h1这种加功能的话，本身h1已经带上了特殊字体，所以使用不带特殊功能的div比较方便

　　2.2.3 块级标签和内联标签

　　　　　块级标签：独占一行并且可以嵌套内联标签和块级标签

　　　　　内联标签：不独占一行，如果需要换行需要加<br>

　　2.2.4给html加空格

　　　　在html中，无论手动输入多少个空格，都默认只显示一个

　　　　所以：

　　　　&nbsp==>一个空格

　　　　&lt==>小于号

　　　　&gt==>大于号

　　　　&copy==>c符号

　　　　&Reg==>r商标符号

　3. img标签

　　img即图片，给html中加入图片

　　src：图片文件的上传路径。

　　alt：图片没有加载成功是显示的内容

<img src="C:\Users\brown\PycharmProjects\python_s3\day37\1.png" alt="">

　4.<a>标签

　　a标签是超链接标签，点击之后可以跳转到另外一个网页，target是点击时新创建一个窗口，如果不写则在当前窗口上进行跳转

<a href="www.baidu.com" target='_blank'></a>

5.列表标签

　　5.1<ul>

　　　　无序标签，通过li来包装

<ul>
    <li>
        111
    </li>
    <li>222</li>
    <li>22233</li>
</ul>

111
222
22233

　　5.2 有序列表<ol>

显示顺序123

<ol>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ol>

　　5.3 dl结构标签

<dl>
    <dt>22
        <dd>11</dd>
    <dd>33</dd>
    </dt>
</dl>

相当于分级结构，第一章，第一节

6.form表单

　　6.1给标签加上id

标签的id是在整个html中唯一的　　

<div id="ll"></div>

2018-08-11-Python全栈开发day37-web前端html快读入门

猜你喜欢