一 html基础
一、 html
html：页面结构：可以把他看成一个文档，定义展示页面的内容结构。
css：：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果。
javaScript：页面行为：部分动画效果、页面与用户的交互、页面功能。
1. 文档申明： <!DOCTYPE html>，声明该html文件使用的HTML版本
2. 页面头部：<head> </head> 标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和 javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏。
3. 页面内容：<body> </body> 元素定义文档的主体，也就是页面显示的内容.
4. html常用标签：
1> 注释：<!--这是html页面的注释 -->
2> 普通段落：<p> </p>
3> 标题标签：<h1> </h1> 到 <h6> </h6>
4> 换行标签：<br> ，空标签，因为没有结束标签
5> 水平线标签(horizontal rule)：<hr> 空标签
6> 块标签：<div> </div> 可以把文档分割为独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联；
7> 行内块标签：<span> </span> 表示一行中的一小段内容，对它应用样式时，才会产生视觉上的变；
8> 含样式和语义的行内标签：
a> 字体斜体(Italic)：<i> </i>
b> 语义为强调内容，表示重要(倾斜效果emphasize)： <em> </em>
c> 字体加粗(bold)：<b> </b> 是一个物理标签，告诉浏览器应该以何种格式显示文字；
d> 语义为强调内容，表示非常重要(效果加粗) ：<strong> </strong> 是一个逻辑标签，强调文档逻辑，告诉浏览器这些文字有什么样的重要性；
9> 图像标签：<img> </img> 向网页中嵌入一张图像，不是在网页中插入图像，而是从网页上链接图像，标签有两个必需的属性：src 属性 和 alt 属性。
a> src：规定显示图像的url；
b> alt：规定图像的替代文本；
10> 超链接标签：<a> </a> 用于从一个页面链接到另一个页面，最重要的属性是href，它指定链接的目标；
11> 链接到一个外部样式：<link> </link> 即链接外部的css文件
12> 音频标签：<audio> </audio>
13> 视频标签：<video> </video>
14> 列表：分有序列表和无序列表
a> 有序列表：<ol> </ol> 在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用
b> 无序列表：<ul> </ul> 在网页上定义一个无编号的内容列表可以用
15> 表格：<table> </table> 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成；
a> tr 定义表格行
b> th 定义表头
c> td 定义表格单元
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--link链接到一个外部样式 --> 7 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 8 </head> 9 <body> 10 <!-- 这是html页面的注释 --> 11 12 <!--标题标签h1到h6 --> 13 <h1>这是标题H1</h1> 14 <h2>这是标题H2</h2> 15 <h3>这是标题H3</h3> 16 <h4>这是标题H4</h4> 17 <h5>这是标题H5</h5> 18 <h6>这是标题H6</h6> 19 20 <!--hr标签表示水平线 --> 21 <hr> 22 23 <!--p标签表示段落 --> 24 <p> 25 这是一段普通的段落。pycharm中写前端代码标签时，输入标签+tab补全键即可 26 </p> 27 28 <!--br换行标签 --> 29 <p> 30 打开“深圳通APP”首页，选择【学生卡】->【申请新卡】<br> 填写准确的学生卡持卡人信息，阅读并同意《办理学生卡须知》。<br>并按照页面提示，上传学生及其监护人身份证证明等。提交后，填写正确的收货信息，10个工作日内，制作好的深圳通学 31 </p> 32 33 <!--div块标签，span行内块标签--> 34 <div style="color:red"> 35 <h5>这是标题h5</h5> 36 <p> 37 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间 38 <span style="color: cyan">span中的内容</span> 39 您也可以在样式表中规定。 40 </p> 41 42 <!--i字体斜体，em字体斜体，但是语义为强调内容，表示重要--> 43 <i>这个是i标签</i> 44 <br> 45 <em>这个是em标签,语义为强调内容，表示重要</em> 46 <br> 47 <!--b字体加粗，strong字体加粗，但是语义为强调内容，表示非常重要--> 48 <b>这个是b标签</b> 49 <br> 50 <strong>这个是strong,语义为强调内容，表示非常重要</strong> 51 <br> 52 <!--img图像标签--> 53 <img src="../001.jpg" alt="这里是一张图片"> 54 <br> 55 <!--a 超链接标签--> 56 <a href="http://www.baidu.com">点击链接跳转到百度</a> 57 <br> 58 <!--audio 音频标签--> 59 <audio src="录音文件_1.mp3" controls="controls"></audio> 60 <br> 61 <!--video 视频标签--> 62 <video src="./body.mp4" width="320" height="240" controls="controls"> </video> 63 <br> 64 <!--ol 有序列表标签--> 65 <ol> 66 <li>列表文字一</li> 67 <li>列表文字二</li> 68 <li>列表文字三</li> 69 </ol> 70 <!--ul 无序列表标签--> 71 <ul> 72 <li><a href="#">标题一</a></li> 73 <li><a href="#">标题二</a></li> 74 <li><a href="#">标题三</a></li> 75 </ul> 76 <!--dl 定义列表标签，结合dt定义列表中的项目和dd描述列表中的项目--> 77 <dl> 78 <dt>python</dt> 79 <dt></dt> 80 <dd>解释性语言</dd> 81 <dt>java</dt> 82 <dd>编译型语言</dd> 83 </dl> 84 <!--table表格标签，tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元--> 85 <table border="1" > 86 <tr> 87 <th>name</th> 88 <th>java</th> 89 <th>python</th> 90 </tr> 91 <tr> 92 <td>小明</td> 93 <td>精通</td> 94 <td>熟悉</td> 95 </tr> 96 <tr> 97 <td>小张</td> 98 <td>不会</td> 99 <td>不会</td> 100 </tr> 101 </table> 102 103 104 105 </div> 106 107 </body> 108 </html>
5. form表单
form标签：用于为用户输入创建html表单，如文本字段，复选框，单选框，提交按钮等
1> form标签的属性：
a> action属性：定义表单数据提交地址
b> method属性：定义表格提交方式，如get,post
2> form表单包含的元素：
a> input：通用的表单元素
b> label：为表单元素定义文字标注·
c> textarea：定义多行文本输入框
d> select： 定义下拉表单元素
e> option：与<select>标签配合，定义下拉表单元素中的选项
3> input标签
a> name属性：定义表单元素的名称，此名称是提交数据时的键名
b> value属性：定义表单元素的值
c> placeholder属性：定义输入框的灰色提示文案
d> type属性：定义表单的类型，常有如下种类：
* text： 定义单行文本输入框
* password：定义密码输入框
* radio：定义单选框
* checkbox：定义复选框
* file：定义上传文件
* submit：定义提交按钮
* button：定义一个普通按钮，一般用于触发javescript事件的
* reset：定义重置按钮
* image：定义图片作为提交按钮，用src属性定义图片地址
* hidden：定义一个隐藏的表单域，用来存储值
4> label标签
a> <label>标签为input元素定义标注(标记)，它为鼠标用户改进了可用性，在label元素内点击文本，就会触发此控件；
b>即当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上；
c> 该标签的for属性应当与相关元素的id相同；
d> label效果：点击账号文本(鼠标是可点击的箭头形状)时，光标聚集到账号输入框上
5> textarea标签，可用属性如下：
a> autofocus：规定在页面加载后文本区域自动获得焦点；
b> cols：规定文本区内的可见宽度；
c> rows：规定文本区内的可见行数；
e> disabled：规定禁用该文本区；
f> form：规定文本区域所属的一个或多个表单；
g> name：规定文本区的名称；
h> placeholder：规定描述文本区域预期值的简短提示；
i> maxlength：规定文本区域的最大字符数；
j> readonly：规定文本区为只读；
k> required：规定文本区域是必填的；
6> select标签，可创建单选或多选菜单,,也可以用于选择数据提交表单；
7> option标签，定义下拉列表中的一个选项，option 元素位于 select 元素内部，浏览器将option标签中的内容作业为<select>标签的菜单或是滚动列表中的一个元素显示；
8> iframe：内联框架，会创建包含另外一个文档的内联框架；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html表单</title> 6 </head> 7 <body> 8 <h3>登录表单</h3> 9 <form action="http://127.0.0.1:5000/" method="get"> 10 账号：<input type="text" name="user" id="usrname"> 11 <br> 12 密码：<input type="password" name="pwd"> 13 <br> 14 登录：<input type="submit"> 15 16 17 </form> 18 <h3>注册表单</h3> 19 <form action="http://127.0.0.1:5000/" method="get"> 20 <!--label效果：点击账号文本(鼠标是可点击的箭头形状)时，光标聚集到账号输入框上--> 21 <label for="usr">账号:</label> 22 <input type="text" name="user" id="usr" placeholder="请输入账号"> 23 <br> 24 密码：<input type="password" name="pwd" placeholder="请输入密码"> 25 <br> 26 确认密码：<input type="password" name="pwd2" placeholder="请再次输入密码"> 27 <br> 28 选择性别： 29 <input type="radio" name="gender">女 30 <input type="radio" name="gender">男 31 <br> 32 选择技能： 33 <input type="checkbox" name="skill">python 34 <input type="checkbox" name="skill">java 35 <input type="checkbox" name="skill">C++ 36 <br> 37 上传头像： 38 <input type="file"> 39 <br> 40 <input type="hidden" name="token" value="aaabbbcc"> 41 <br> 42 43 个人介绍： 44 <br> 45 <textarea name="desc" id="" cols="50" rows="10" placeholder="请简单介绍一下你自己！"></textarea> 46 <br> 47 48 省份选择： 49 <select name="province" id="pro"> 50 <option value="">江西省</option> 51 <option value="">湖南省</option> 52 <option value="">武汉省</option> 53 <option value="">广东省</option> 54 </select> 55 <br> 56 城市选择： 57 <select name="city" id="ci"> 58 <option value="">九江市</option> 59 <option value="">南昌市</option> 60 <option value="">深圳市</option> 61 <option value="">上海市</option> 62 </select> 63 <br> 64 <!--按钮：提交，重置，普通按钮，图片按钮--> 65 登录：<input type="submit"> 66 <input type="reset"> 67 <br> 68 <input type="button" value="普通按钮"> 69 <br> 70 <input type="image" src="./下载.jfif" width="40" height="50"> 71 </form> 72 73 <!--iframe 内联框架--> 74 <iframe src="https://www.baidu.com" frameborder="0" width="800" height="300"></iframe> 75 <br> 76 <iframe src="http://testrenshang.cias.cn/passport/login" frameborder="0" width="800" height="300"></iframe> 77 78 </body> 79 </html>
