HTML技术概要

版权声明：如需转载请联系博客主人 https://blog.csdn.net/weixin_44614406/article/details/86777676

HTML

1，一套规则，浏览器认识的规则
2，开发者：

学习Html规则
开发后台程序：
- 写Html文件（充当模板的作用）
- 数据库获取数据，然后替换html文件的指定位置（Web框架）

3，本地测试

- 找到文件路径，直接浏览器打开
- pycharm打开测试

4，编写Html文件

- doctype对应关系
- html标签，标签内部可以写属性 --> 只能写一个
- 注释：<!-- 注释的内容 -->

5，标签分类

- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
<title>MR. Dong</title>

6，head标签中

- <meta   --> 编码，跳转，刷新，关键字，描述，IE兼容
<meta http-equiv="Refresh" content="3"> 刷新
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />
- title标签
- <link />  搞图标
- <style />	css样式
- <script /> JavaScript代码

7，body标签

- 图标，   $gt; <
- p标签，段落
- br，换行
- hr，横线
===== 小总结 =====
所有标签可分为：
块级标签：div(白板)，H系列（h标签，h1加大加粗），p标签（段落和段落之间有间距）
行内标签：（内联标签） span(白板（自身不带特性）)
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div
- span

- input系列 + form标签
input type=“text” - 文本输入框
input type=“password” - 密码输入框
input type=“submit” - value=“提交” 提交表单按钮
input type=“button” - value=“登录” 普通按钮

input type="radio"      - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type="checkbox"   - 复选框 value，checked="checked"，name属性（批量获取数据）
input type="file"       - 依赖form表单的一个属性 enctype="multipart/form-data"
input type="reset"      - 重置
<textarea>默认值</textarea>     - name属性，多行文本输入

代码：

<form enctype="multipart/form-data">
<div>
<input type="text" name="texts"/>
<p>请选择性别</p>
男：<input type="radio" name="gender" value="1" checked/>
女：<input type="radio" name="gender" value="2"/>
Alex：<input type="radio" name="gender" value="3"/>
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1"/>
足球：<input type="checkbox" name="favor" value="2" checked/>
皮球：<input type="checkbox" name="favor" value="3"/>
台球：<input type="checkbox" name="favor" value="4"/>
网球：<input type="checkbox" name="favor" value="5"/>
<p>技能</p>
撩妹：<input type="checkbox" name="skill" checked/>
写代码：<input type="checkbox" name="skill"/>
<p>上传文件</p>
<input type="file" />
</div>
<textarea name="meno">默认值</textarea><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>

-select标签
-name，内部option value，提交到后台，size显示长度，muiltiple多选

<select name="city" multiple="multiple" size="2" >
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ" selected="selected">深圳</option>
<option value="CD">成都</option>
</select>

- a标签
- 跳转
- 锚   href="#某个标签的ID" 标签的ID不能重复
例：

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height:600px">第一章内容</div>
<div id="i2" style="height:600px">第二章内容</div>

-img
src="" 图片路径
alt="" 图片不存在时，显示alt的内容
title="" 鼠标放在图片上时显示的字体

<a href="http://oldboyedu.com">
<img src="1.jpg" title="大美女" style="height: 200px;width: 200px" alt="努力">
</a>

- 列表

ul  以点开头
li
ol  以数字开头
li
dl  以dt的内容为开头，dd内容前面一个Tab键
dt
dd

代码：

<ul>
<li>你好</li>
<li>你好</li>
</ul>
<ol>
<li>世界</li>
<li>世界</li>
</ol>
<dl>
<dt>你好</dt>
<dd>世界</dd>
<dd>世界</dd>
<dt>Hello</dt>
<dd>World</dd>
<dd>World</dd>
</dl>

- 表格

table
thead
tr
th
tbody
tr
td

合并单元格
colspan="" 行合并(等于几表示占几格)
rowspan="" 列合并(等于几表示占几格)

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

- label
用于点击文字，使得关联的标签获取光标

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

- fieldset
legend 属性

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