一、 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 定义表格单元
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:内联框架,会创建包含另外一个文档的内联框架;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>