【笔记】- 蒟蒻初识HTML的一点点笔记

最新推荐文章于 2024-07-15 21:24:19 发布

Kapo1

最新推荐文章于 2024-07-15 21:24:19 发布

阅读量217

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/Kapo1/article/details/104399996

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

先来认识一下HTML

HTML英文全称
HTML（HyperText Markup Language，超文本标记语言）是一种描述语言，用来定义网页结构。
HTML 文档是包含多个 HTML 元素的文本文档。每个元素都用一对开始和结束标签包裹。每个标签以尖括号（<>）开始和结束。也有一部分标签中不需要包含文本，这些标签称为空标签，如 <img>。

常用的语法语义

基础基础知识]

先来看一点点快捷键啦
ctrl + n 创建一个文件
ctrl + s 保存一个文件

常用HTML标签
HTML 标记标签通常被称为 HTML 标签，它是由尖括号包围的关键词，如<html>
HTML基本结构

HTML常用实体

哎呀呀，今天老师讲的HTML实体，讲的我一脸懵逼呀，这是啥东西，这么nb直接标记符号的嘛，嘿嘿嘿，记下来记下来！！！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
¢	分(cent)	¢	¢
£	镑(pound)	£	£
¥	元(yen)	¥	¥
€	欧元(euro)	€	€
©	版权(copyright)	©	©
®	注册商标	®	®

标题

规范格式：<h1>...</h1> h1-h6
代码：

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

在浏览器中,标题独占一行。
页面效果： 标题大法

段落

规范格式：<p>...</p>
代码：
段落大法
页面效果：

图片

规范格式：<img />
代码：

<img src="images/logo.gif"
          alt="我是logo" />

注意这里：`

src : 指明存储图像的位置(图片的路径)
alt : 为图片添加替换文本
不要使用本机绝对路径，推荐使用相对路径
图片文件单独存放在一个文件夹中
图片文件夹与页面文件放在同一个目录下

页面效果：
图片大法

超链接

规范格式：<a href=“”>...</a>
代码：

<body>
这是一个超链接：
<a href = "demo1.html"><h2>HTML中的二级标题</h2></a>
<br/>
您也可以使用图像来作链接：
<a href = "http://www.baidu.com/"  target = "_blank">
      <img src ="image/baidu.jpg"  alt = "baidu logo" />
</a>
</body>

注意这里：

href：必选属性，规定链接目标(连接的目标 URL)
target：在何处打开目标
_blank：在新窗口打开
_self：在当前窗口打开(默认)

页面效果：
超链接大法

列表

无序列表：是一个没有前后顺序的信息列表。
有序列表：是一个有前后顺序的信息列表。

分开来讲

无序列表

无序列表使用 <ul> 标签，每个列表项使用 <li>标签。
每个列表项默认使用粗体圆点进行标记。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

代码：
列表大法
页面效果：

2. 有序列表

有序列表使用 <ol> 标签，每个列表项使用 <li>标签。
每个列表项默认使用数字进行标记。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

代码：
列表大法
页面效果：

表格

哎呀呀，这里的知识好多呀，慢慢来。。。
规范格式：。。。这里直接看代码叭
代码：

<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>李四白</td>
        <td>20</td>
        <td>100</td>
    </tr>
    <tr>
        <td>张三丰</td>
        <td>19</td>
        <td>80</td>
    </tr>
    <tr>
        <td>王小麻</td>
        <td>18</td>
        <td>89</td>
    </tr>
</table>
</body>

页面效果：
表格大法
这里表格相关标签的一些语法语义：

<table></table>
语法：1.成对出现 2.表格的开始和结束位置
语义：定义一个“表格”
<tr></tr>
语法：1. 成对出现 2. 嵌套于<table></table>标签内
语义：定义表格中的“一行”
<th></th>
语法：1. 成对出现 2. 嵌套于<tr></tr>标签内
语义：定义“表头”（特殊的单元格）
<td></td>
语法：1. 成对出现 2. 嵌套于<tr></tr>标签内
语义：定义表格中的“一个单元格”
代码：

<body>
<table border="1" cellpadding = "20"  cellspacing = "40">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>李四白</td>
        <td>20</td>
        <td>100</td>
    </tr>
</table>
</body>

页面效果：
表格大法
这里表格相关属性的一些语法语义：

border：表格边框的宽度（pixels）
bordercolor：表格边框的颜色
background：表格背景图
bgcolor：表格背景颜色
cellpadding : 单元边沿与其内容之间的距离（pixels）
cellspacing : 单元格之间的空白（pixels）
width : 规定表格元素的宽度（pixels或%）
height : 规定表格元素的高度（pixels或%）
align：表格的对齐方式（left center right）

单元格合并–跨列：
代码：

<body>
<table border="1" >
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>李四白</td>
        <td colspan = "2">2888880</td>
    </tr>
</table>
</body>

页面效果：
表格大法
代码：

<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td rowspan = "2" >张三丰</td>
        <td>19</td>
        <td>89</td>
    </tr>
    <tr>
        <td>18</td>
        <td>89</td>
    </tr>
</table>
</body>

页面效果：
表格大法

表单

**表单是一个包含表单元素的区域。**表单元素是允许用户在表单中输入信息的元素。（比如：文本框、下拉列表、单选框、复选框等等）
其作用是从访问网站的用户那里获得信息，是用户向服务器传输数据的接口。

表单标签：

<form></form>
- 语法：1. 成对出现 2. 表单的开始和结束位置
- 语义：定义一个“表单”
- 相关属性：
  - action：规定向何处发送提交的表单数据。值：URL
  - method：规定以何种方式将表单数据传送到服务器。值：get/post
所有表单控件都必须放在<form></form>标签之间，否则用户输入的信息无法提交到服务器！

表单控件：

文本框
当用户要在表单中键入字母、数字等内容时，就会用到文本框。
规范格式：

<form>
     <input type = "text" name = "名称" value = "文本" />
</form>

type：当type = "text"时，输入框为文本输入框。
name：为输入框命名，以备后台程序使用。
value：为输入框设置默认值。(一般起到提示作用)

代码：

<form> 
     First name: 
     <input type = "text" name = "firstname" /> <br />
     Last name: 
     <input type = "text"  name = "lastname" /> 
</form>

页面效果：
表单控件大法

密码框
当用户要在表单中键入密码时，就会用到密码框。
规范格式：

<form>
     <input type = "password" name = "名称" value = "文本" />
</form>

type：当type = "password"时，输入框为密码输入框。
name：为输入框命名，以备后台程序使用。
value：为输入框设置默认值。(一般起到提示作用)

代码：

<form> 
姓名： 
<input type = "text" name = "myName"/> <br/> 
密码：
 <input type = "password" name = "pass"/> 
</form>

页面效果：
表格控件大法

单选框和复选框
单选框的规范格式：

<form>
<input type = "radio"  value = "Male"      name = "sex"  checked />男
<input type = "radio"  value = "feMale"   name = "sex"  />女
</form>

type : 当 type = “radio” 时，控件为单选框。
value：提交数据到服务器的值。
name：为控件命名。
checked：当添加 checked 时，该选项默认选中。
同组单选框name属性值必须相同

复选框的规范格式：

<form>
<input type = "checkbox"  value = "good1"  name = "goods" />    I have a bike 
<input type = "checkbox"  value = "good2"  name = "goods" />     I have a car 
</form>

type : 当 type =“checkbox” 时，控件为复选框。
value：提交数据到服务器的值。
name：为控件命名。
checked：当添加 checked 时，该选项默认选中。
同组复选框name属性值需要一致

两种选择框的代码：

<form> 
你是否喜欢旅游？请选择 <br/> 
<input  type = "radio"  name = "choose"   value = "喜欢"/>喜欢
<input  type = "radio"  name = "choose"   value = "不喜欢"/> 不喜欢<br/> 
你对哪些活动感兴趣？请选择 <br/> 
 <input  type = "checkbox"  name = "hobby"   value = "跑步"/>跑步
 <input  type = "checkbox"  name = "hobby"   value = "打球"/>打球
 <input  type = "checkbox"  name = "hobby"   value = "爬山"/>爬山
</form>

同一组选择框，name属性值需要相同！
同一组选择框，value属性值需要不同！

页面效果：
选择框大法

文件控件
当 type 属性值为 file 时，用于文件上传。

代码：

<form>
    <input type = "file" name = "files" />
</form>

页面效果：
文件控件大法

按钮

提交按钮：type=“submit”
提交表单信息到服务器
重置按钮：type=“reset”
重置表单信息至初始状态
普通按钮：type=“button”

代码：

<form>
 <input type="submit" value="提交" name="sub" />
 <input type="reset"    value="重置"  name="res" />
 <input type="button" value="按钮"  name="but" />
</form>

页面效果：
按钮大法

多行文本域
- 标签：
- 相关属性：
  rows：规定文本区内可见行数。
  cols：规定文本区内可见列数。

代码：

<form>
<textarea  name = "cat " rows = "3" cols = "30"> 
 The cat was playing in the garden.
</textarea>
</form>

页面效果：
多行文本域大法

下拉列表
- 标签：
- 列表项：

代码：

<form>
 <select name = "class">
      <option value = "one"  selected> 软件一班 </option>
      <option value = "two"> 软件二班 </option>
      <option value = "three"> 软件三班 </option>
   </select>
</form>