html学习总结（如何建立css与html的连接，checkbox、color、date、file等组件分析）

一、建立CSS与HTML的连接：

可以在html文件同目录下建立记事本文件，假设文件的名称为mystyle，改后缀为css，将下面代码增添入html文件的任何位置。

<style type="text/css">
      @import"mystyle.css";
</style>

二、重要知识点：

2.1 表格的创建

在HTML中，<tr>和<th>和<td>是用于创建表格的标签。

<th>用于定义表格的列名，是表格的第一行。

<td>用于创建表格中的数据单元格，显示具体的信息。

<tr>用于定义每一行。align属性可用于设定居中，默认靠左。

重点介绍<table>标签，用于创建单元格的边框，width属性定义了单元格的宽度，border属性定义了边框的宽度，cellspacing定义了单元格之间的间距。

<table border="1" cellspacing="1" width="400">
        <tr align="center">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>30</td>
            <td>女</td>
        </tr>
</table>

上面的代码显示效果如下：

三、<input> types:

2.1 button 按钮

<input type="button" value="点我跳转">

2.2 checkbox 打勾方框

<input type="checkbox" id="scales" name="scales" checked>
<label for="scales"> 提示语 </label>

2.3 color 颜色选择面板

value用于确定初始的颜色

<input type="color" id="head" name="head" value="#e66465">
<label for="head"> 提示语 </label>

2.4 date 时间选择器

value用于选定初始的时间，min和max分别用于限定可选时间的下限和上限

<input type="date" id="start" name="trip-start"
           value="2018-07-22"
           min="2018-01-01" max="2018-12-31">

2.5 file 文件选择

accept用于限定可接收的文件类型

<input type="file" id="avatar" name="avatar"
           accept="image/png, image/jpeg">

2.6 password 密码输入

minlength用于限定密码最小长度

 <input type="password" id="pass" name="password"
           minlength="8" required>

2.7 radio 单选按钮

<input type="radio" id="dewey" name="drone" >

2.8 reset 清空输入

<input type="reset" value="Reset">

2.9 submit 提交按钮

<input type="submit" value="提交" />

2.10 text 单行文本

minlength和maxlength分别用于限定最小和最大长度，size用于确定总长度

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

2.11多行文本用textarea:

<textarea cols="行数" rows="列数">  内容  </textarea>

name=""用于给组件命名，方便与python中的代码进行连接。

value=""用于给组件填充内容

2.12 fieldset区域

<fieldset>
....
</fieldset>

label是标签：

<label for="start"> 标签内容：</label>

fieldset用于对表单进行划分：

  <fieldset>   </fieldset>

legend元素用于表示其父元素：

<legend>  内容  </legend>

生成跳转连接，跳转到同目录下文件

<p><a href="待跳转文件地址"> 输入文字 </a></p>

跳转新界面：下面语句会生成一个按钮，按钮文字是“登录”，跳转显示E:/demo/edit/edit.html下的文件。

<button οnclick='window.open("E:/demo/edit/edit.html")' type="button" id="add">登录</button> 

link:

<link href="/media/examples/link-element-example.css" rel="stylesheet">

告诉模板引擎去加载名为navigation.html的模板文件

{% include 'navigation.html' %}

<link rel="stylesheet" href="../static/css/navigation.css">: 引入名为"navigation.css"的CSS样式表文件，用于页面导航的样式。

meta:

HTML <meta> 元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息。如：<base>、<link>、<script>、<style> 或 <title>。

<meta name="viewport" content="width=device-width, initial-scale=1.0">: 用于设置页面的视口（viewport），以适应不同设备的屏幕大小

跳转原界面：

<button οnclick="window.location.href='E:/demo/edit/edit.html' " type="button" id="add">登录</button>  

一、HTML介绍

HTML（HyperText Markup Language）：超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：有标签构成的语言。HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

学习HTML主要是学习标签，学习CSS主要是学习样式。

二、基础标签&样式

1. 图片标签 <img>：

src：设置图像的url（绝对路径/相对路径）

width：图像的宽度（像素/相对于父元素的百分比）

height：图像的高度（像素/相对于父元素的百分比）

2. 标题标签 <h1>到<h6>

3. 水平线标签 <hr>

4.换行<br>

三、表格、表单标签

tr是一行，th是表头的行元素，td是非表头的行的每列元素

四、VS Code开发工具

Visual Studio Code - Code Editing. Redefined

 如果是windows系统直接点击下面的稳定版下载：

直接点下面的进行下载：

下载插件：

 

 

更改主题：

导入文件和新建