老男孩14期自动化运维day14随笔和作业(一)

HTML

浏览器本质相当于socket客户端，业务服务器相当于socket服务端，建立sokcet传输数据，
服务器端收到消息进行处理，发送数据并关闭，然后浏览器收到消息展示页面，

1.其实就是一套规则，浏览器认识的规则
2.开发者：

（1）学习html规则
（2）开发后台程序：
- 写html文件（充当模板的作用）
- 数据库获取数据，然后替换到html文件的指定位置（web框架就是帮我们做这些事的）

3.本地测试

（1）找到文件路径，直接浏览器打开
（2） pycharm 打开测试（pycharm会自己给你起个socket）

4.编写html文件

（1）doctype对应关系
（2） html标签，标签内部可以写属性 ===> < html >标签只能有一个
- 注释用： < !-- 注释的内容 – >

5.标签分类

自闭合标签（就不用写结尾）可以写成< meta >或者< meta />所有自闭和标签都可以这样但最好是在后面加斜杠例如< br / >
< meta charset=“UTF-8”> 就先记这个

主动闭合标签
< title >Title< /title>

6.
head标签中

编码，跳转，刷新，关键字，描述，IE兼容>

< title > 标题

< link / > 里面有个网站窗口的小图标，还有很多先不讲,或者链接css来引入css

< style / > 样式

< script>

7.body标签

所有的标签分为：

块级标签：独占一行
H系列（加大加粗），p标签（段落和段落之间有间距）,div标签(白板) div是用的最多的

行内标签（内联标签）：可以多个存在一行
span标签（白板）

标签之间可以嵌套
标签存在的意义，定位操作容易，以及css js操作很简单
ps: chrome 可以审查元素的使用（重要）
- 可以定位
- 可以查看样式

8.body标签详细

图标，&nbsp一个空格; &gt 大于;&lt 小于
p标签，段落
br,换行
div 必须要会（白板块级）
span 必须要会（白板行内）
h 系列必须要会（加大加粗）
< input > < select> < textarea >
只有input+form select textarea才能提交数据

input系列+form：要全会
POST和GET差不多， GET会把数据拼接放在url上，POST是自己传入

< form action=“http…” method=‘GET’> 提交表单

input type=“text” - name属性，value=… value是输入默认值

input type=“password”- password属性,value=…

input type=“submmit” - value="提交"提交按钮表单

input type=“button” - valus="登录按钮

input type=“redio” 单选框 - value,name属性（name相同则互斥就只能选一个的意思）

input type=“checkbox” 复选框 -value ,name属性（批量获取数据）

input type=“file” - 默认上传不了,必须依赖form表单的一个属性

input type=“reset” - 重置

< textarea name=“tx”> 默认值 < /textarea> 多行文本输入这个也可以提交数据到后台

select标签 - name 内部opetion value ,提交到后台，size 大小，multiple 多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

     <form action="http://localhost:8888/index" method="GET">
         <input type="text" name="user"/>
         <input type="password" name="pwd"/>
         <input type="button"  value="登录1"/>
         <input type="submit"  value="登录2"/> <!-- 默认get提交 -->

         <!--提交后 生成字典格式 {'user':...,'pwd':...}提交到后台 -->
         <!--POST和GET差不多， GET会把数据拼接放在url上，POST是自己传入-->
     </form>
     <p>上传文件</p>
     <input type="file" name="fname" />


     <textarea name="tx"> ad ad </textarea>

<div>
     <select name="city" > <!-- 单选 -->
         <option value="1">北京</option>
         <option value="2">上海</option>
         <option value="3">成都</option>
         <option value="4" selected="selected">南京</option>
     </select>


     <select name="city" multiple="multiple" size="2"> <!-- 多选 -->
         <option value="1">北京</option>
         <option value="2">上海</option>
         <option value="3">成都</option>
         <option value="4" selected="selected">南京</option>
     </select>
</div>


</body>
</html>

a标签必会

跳转 < a href=“http://www.baidu.com” targrt=…> 百度

锚 < a href=’#某个标签的id’> 标签id不允许重复

锚跳转到某个地方：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <a> 第一章 </a>
   <a> 第二章 </a>
   <a href="#i3"> 第三章 </a>
   <a> 第四章 </a>
   <div style="height:600px;">第一章的内容</div>
   <div style="height:600px;">第二章的内容</div>
   <div id="i3" style="height:600px;">第三章的内容</div>
   <div style="height:600px;">第四章的内容</div>
</body>
</html>

img标签必会

< img src=“1.jpg” title=“百度” style=“height:200px;width:200px;” alt=“百度”>

title 鼠标放上去现实 alt没有图片的时候显示
默认img标签有一个1px的边框
去掉为 img{
border:0;
}

列表标签

<ul>
    <li>a</li>
    <li>b</li>
</ul>

<ol>
    <li>a</li>
    <li>b</li>
</ol>

<dl>
    <dt>aaa</dt>
    <dd>bbb</dd>
</dl>

table标签（表格必会）

thead 表头
tbody 表格内容
tr 一行
td 一列
colspan 列合并等于几表示占几格
rowspan 行合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <table border="1">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
            </tr>

            <tr>
                <td>2.1</td>
                <td>2.2</td>
            </tr>

        </table>
     <table border="1">
         <thead>
             <tr>
                 <th>表头1</th>
                 <th>表头2</th>
                 <th>表头3</th>
                 <th>表头4</th>
             </tr>
         </thead>
         <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td colspan="3">1</td>

            </tr>
            <tr>

                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
         </tbody>
     </table>
</body>
</html>

lable标签（用于点击文字，使得关联的标签获取光标）知道就行

 <label for="username">用户名：</label>
 <input id="username" type="text" name=" user" />

老男孩14期自动化运维day14随笔和作业(一)

HTML

猜你喜欢