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转到此标签

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

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

<div id="ll">2222222</div>
<a href="#ll">111</a>

　　6.2 input内联标签

　　　　用于向服务器输入数据用，然后将整个表单的数据，传送给服务器。但是如果想要给服务器发过去，还需要加入其它name等选项

账号<input type="text">
密码<input type="password">
爱好：羽毛球<input type="checkbox"> 电脑<input type="checkbox">
性别：男<input type="radio"> 女<input type="radio">
提交 <input type="submit">
按钮 <input type="button">

　　但是用户输入的信息是如何提交给服务器呢？

　　6.2输入信息传给服务器

　　　　在html表单中，用户输入的信息是通过键值对的方式来交给服务器，所以除了给用户识别各个信息之外，也要给服务器一个属性来识用户输入的名字和对应的值。

　　　　对于checkbox，若写入checked=checked，则是默认勾选的意思

账号<input type="text" name="user">
密码<input type="password" name="password">
爱好： 羽毛球<input type="checkbox" name="hobby" value="yumaoqiu"> 电脑<input type="checkbox" name="hobby" value="pc">
性别： 男<input type="radio" name="gender" value="male" > 女<input type="radio" name="genders" value="female">
提交 <input type="submit">
按钮 <input type="button">

　　6.3 重新设置

重置 <input type="reset">

　　6.4 上传文件

上传文件 <input type="file" name="'filename">

　　6.5 下拉选择

安徽<select name="anhui" id="anhui">
    <option value="fuyang">阜阳</option>
    <option value="huaibei">淮北</option>
    <option value="bozhou">亳州</option>
    <option value="huainan">淮南</option>
    <option value="bengbu">蚌埠</option>

　　6.5.1 选择组

　　6.6 textarea输入文本框

<textarea name="textarea" id="" cols="30" rows="10"></textarea>

　　6.7绘制表格

<table>
   <thead>
   <tr>
       <th>111</th>
       <th>333</th>
       <th>444</th>
   </tr>

   </thead>
    <tbody>
    <tr>
        <td>666</td>
        <td>777</td>
        <td>888</td>
    </tr>
    </tbody>
</table>

thead是表格的标题，，在标题内部，每个tr表示一行，然后一个th表示一列。。tbody中表示表体，每个tr表示一行，每个td表示一列、

　　6.7.1给列表加边框

<table cellpadding="5px" border="5px" cellspacing="5px">

padding是字体到内边框的距离，border是内边框到外边框的距离，spacing是外边距到网页外的距离

　　6.7.1 合并单元格

　　　　合并两行：rowspan,然后删除另外一个的属性

<table cellpadding="5px" border="5px" cellspacing="5px">
   <thead>
   <tr>
       <th>111</th>
       <th>333</th>
       <th>444</th>
   </tr>

   </thead>
    <tbody>
    <tr>
        <td>666</td>
        <td rowspan="2">777</td>
        <td>888</td>
    </tr>
    <tr>
        <td>666</td>

        <td>888</td>
    </tr>
    </tbody>
</table>

　　colspan同理

posted @ 2018-08-11 21:14 brownbearye 阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

brownbearye

勤如春去之苗，不见其增，而日有所长。

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

公告