数据挖掘（二）——HTML基础

最新推荐文章于 2024-09-07 07:17:47 发布

cx不会写代码

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量70

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Invincible_xin/article/details/130638719

版权

HTML基础

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

HTML 标题<h>

HTML 标题是通过<h1> - <h6> 标签来定义的。

<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>

HTML段落<p>

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落</p>

HTML 链接<a>

HTML 链接是通过标签 <a> 来定义的。

<a>这是通往百度的链接</a>

HTML图像<img>

HTML 图像是通过标签 <img> 来定义的。（只有开始）

<img src="/images/logo.png" width="200" height="100" />

HTML属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

属性	符号	描述
id	#	id他是唯一的
class	.	class可以同时存在多个
style		规定元素的行内样式
title		描述了元素的额外信息

背景颜色 background-color

<h1 style="background-color: #ff359b">这是一个标题</h1>
<p style="background-color: #00d2ff">这是一个段落</p>

颜色代码对应：

        1  白色        #FFFFFF  2  红色      #FF0000  3  绿色     #00FF00   
        4  蓝色        #0000FF  5  牡丹红    #FF00FF  6  青色     #00FFFF   
        7  黄色        #FFFF00  8  黑色      #000000  9  海蓝     #70DB93   
        10 巧克力色    #5C3317  11 蓝紫色    #9F5F9F  12 黄铜色   #B5A642   
        13 亮金色      #D9D919  14 棕色      #A67D3D  15 青铜色   #8C7853   
        16 2号青铜色   #A67D3D  17 士官服蓝色#5F9F9F  18 冷铜色   #D98719   
        19 铜色        #B87333  20 珊瑚红    #FF7F00  21 紫蓝色   #42426F   
        22 深棕        #5C4033  23 深绿      #2F4F2F  24 深铜绿色 #4A766E   
        25 深橄榄绿    #4F4F2F  26 深兰花色  #9932CD  27 深紫色   #871F78   
        28 深石板蓝    #6B238E  29 深铅灰色  #2F4F4F  30 深棕褐色 #97694F   
        32 深绿松石色  #7093DB  33 暗木色    #855E42  34 淡灰色   #545454   
        35 土灰玫瑰红色#856363  36 长石色    #D19275  37 火砖色   #8E2323   
        38 森林绿      #238E23  39 金色      #CD7F32  40 鲜黄色   #DBDB70   
        41 灰色        #C0C0C0  42 铜绿色    #527F76  43 青黄色   #93DB70   
        44 猎人绿      #215E21  45 印度红    #4E2F2F  46 土黄色   #9F9F5F   
        47 浅蓝色      #C0D9D9  48 浅灰色    #A8A8A8  49 浅钢蓝色 #8F8FBD   
        59 浅木色      #E9C2A6  60 石灰绿色  #32CD32  61 桔黄色   #E47833   
        62 褐红色      #8E236B  63 中海蓝色  #32CD99  64 中蓝色   #3232CD   
        65 中森林绿    #6B8E23  66 中鲜黄色  #EAEAAE  67 中兰花色 #9370DB   
        68 中海绿色    #426F42  69 中石板蓝色#7F00FF  70 中春绿色 #7FFF00   
        71 中绿松石色  #70DBDB  72 中紫红色  #DB7093  73 中木色   #A68064   
        74 深藏青色    #2F2F4F  75 海军蓝    #23238E  76 霓虹篮   #4D4DFF   
        77 霓虹粉红    #FF6EC7  78 新深藏青色#00009C  79 新棕褐色 #EBC79E   
        80 暗金黄色    #CFB53B  81 橙色      #FF7F00  82 橙红色   #FF2400   
        83 淡紫色      #DB70DB  84 浅绿色    #8FBC8F  85 粉红色   #BC8F8F   
        86 李子色      #EAADEA  87 石英色    #D9D9F3  88 艳蓝色   #5959AB   
        89 鲑鱼色      #6F4242  90 猩红色    #BC1717  91 海绿色   #238E68   
        92 半甜巧克力色#6B4226  93 赭色      #8E6B23  94 银色     #E6E8FA   
        95 天蓝        #3299CC  96 石板蓝    #007FFF  97 艳粉红色 #FF1CAE   
        98 春绿色      #00FF7F  99 钢蓝色    #236B8E  100亮天蓝色 #38B0DE 
        101棕褐色      #DB9370  102紫红色    #D8BFD8  103石板蓝色 #ADEAEA 
        104浓深棕色    #5C4033  105淡浅灰色  #CDCDCD  106紫罗兰色 #4F2F4F 
        107紫罗兰红色  #CC3299  108麦黄色    #D8D8BF  109黄绿色   #99CC32

字体样式 font-family

<h1 style="font-family: KaiTi">这是一个标题</h1>

通用：宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312

字体颜色 color

<p style="color:red">一个段落。</p>

字体大小 font-size

<p style="font-size: 18px">这是一个段落</p>

同时修改样式，颜色，大小

<p style="font-family: KaiTi;color:red;font-size: 18px">这是一个段落</p>

文本对齐 text-align

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式

 <h1 style="text-align: center">这是一个标题</h1>

HTML表格 <table>

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

表格实例 <tr> <td>

<h1>一列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
      </tr>
    </table>

<h1>一行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
    </table>

<h1>两行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
</table>

表格表头&标题 <th> <caption>

表格的表头使用 <th> 标签进行定义。
<caption> 元素定义表格标题。 caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<h1>个人兴趣爱好</h1>
<table border="4">
    <caption style="font-size: 150%;font-family: KAITI;color: red">个人信息表</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>跳舞</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>rap</td>
    </tr>
    <tr>
        <td>阿坤</td>
        <td>男</td>
        <td>篮球</td>
    </tr>
</table>

HTML列表

HTML 支持有序、无序列表

无序列表 <ul>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<h3>有序列表</h3>
    <ol>
        <li>有序列表第一行</li>
        <li>有序列表第二行</li>
        <li>有序列表第三行</li>
        <li>有序列表第四行</li>
    </ol>

运行结果：

有序列表 <ol>

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<h3>无序列表</h3>
    <ul>
        <li>无序列表第一行</li>
        <li>无序列表第二行</li>
        <li>无序列表第三行</li>
        <li>无序列表第四行</li>
    </ul>

运行结果：

HTML区块 <div> <span>

HTML 可以通过 <div> 和 <span>将元素组合起来。

html_div

<div style="width: 500px">
    <div style="background-color: #ff359b;width: 500px;height: 50px"><h1 style="text-align: center">这是我当前的标题</h1></div>
    <div style="background-color: darkorange;height: 250px;width: 100px;float: left;">
        <b style="font-size: 20px">语文成绩</b><br>
        <b style="font-size: 20px">数学成绩</b><br>
        <b style="font-size: 20px">英语成绩</b><br>
        <b style="font-size: 20px">政治成绩</b><br>
        <b style="font-size: 20px">历史成绩</b><br>
        <b style="font-size: 20px">地理成绩</b><br>
        <b style="font-size: 20px">物理成绩</b><br>
        <b style="font-size: 20px">化学成绩</b><br>
        <b style="font-size: 20px">生物成绩</b><br>
    </div>
    <div style="background-color: #666666;height: 250px; width: 400px;float: left"></div>
    <div style="background-color: #ff305a;height: 30px; width: 500px;text-align: center;float:left">欢迎下次光临</div>
</div>

html_span

HTML <span> 元素是内联元素，可用作文本的容器。

HTML表单和输入 <form> <input>

html使用<input>来定义输入框
HTML <form>表单用于收集用户的输入信息。
HTML <form>表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

注意：表单本身并不可见

文本域 text

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<input type="text" name="username">

密码字段 password

<input type="password" name="password">

单选按钮 radio

<form>
	<input type="radio" name="sex" value="male">男<br>
	<input type="radio" name="sex" value="female">女
</form>

复选框 checkbox

<form>
	<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
	<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮 submit

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

<form name="input" action="www.baidu.com" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

点击按钮 <button>

html使用<button>定义登陆按钮。

<div style="background-color: #fff1e8;width: 200px;height: 200px;margin:0 auto; margin-top:200px;">
    请输入账号：<input type="text"><br>
    请输入密码：<input type="password">
    <button class="but" type="submit">登录</button> 
</div>

下拉框 <select>

<select>中至少包含一对`<option>

<select>
    <option>---请选择---</option>
    <option>湖南</option>
    <option>湖北</option>
    <option>浙江</option>
    <option>广东</option>
</select>

cx不会写代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
数据挖掘（二）——HTML基础

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
复制链接

扫一扫