HTML 基础知识(自用)

最新推荐文章于 2024-05-06 20:52:53 发布

小怪在家吗

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量48

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_46174473/article/details/120293641

版权

HTML

第一章 HTML骨架

<!DOCTYPE html>
<!-- 定义文档的类型，以HTML5的标准来编译页面 -->
<hr lang="en">
<!--html是页面的根目录 lang是页面使用的语言，en英文 zh-en中文-->

<head>
    <!-- head 页面的头部，内容不现在页面当中，里面的内容用于辅助浏览器编译页面 -->
    <meta charset="UTF-8">
    <!-- charset 定义页面的用什么字符集， utf-8是万国编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的视口， 
     content属性值 :
     width:可视区域的宽度，值可为数字或关键词device-width
     initial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任v何缩放-->
    <title>Document</title>
    <!--title 网页的标题 -->
</head>
<body>
    <!-- body 显示页面内容 -->
</body>

</html>

第二章 HTML常用标签

1.格式化标签

<br/> <!--换行 -->

<p/> <!-- 换段 -->

<hr/> <!-- 水平分割线 -->

<ul><ul/> <!-- 无需列表 -->

<ol><ol/> <!-- 有序列表 -->

<li><li/> <!-- 列表项 -->

<dl><!-- 自定义列表-->
  <dt></dt><!-- 项目名称-->
  <dd></dd><!-- 项目描述-->
<dl/>

<div></div><!-- 常用的块级元素-->

<span></span><!--常用的块级元素-->

2.图像标签

`<img>`

格式：

<img src="./003/img/xxx.jpg" alt="熊猫" title="熊猫">

属性：

src:图片地址以及图片名字
alt：图片加载失败的提示信息
title：文字提示属性

3.超链接标签

`<a ></a>`

格式：

<a href="链接⽬标url地址" target="窗口的弹出方式">⽂字/标签/图像</a>

属性：

href:必须写，跳转的地址
target：表示连接的打开方式
1. blank.新窗口
2. self 默认

4.表格标签

table：定义表格

header 页眉
th 表头
tbody 表格主体
tr 行
td 单元格

属性：

border="1" ：表格边框

cellspacing ：单元格与单元格之间的间距

cellpadding ：单元格的内容与单元格边框之间的间距

align="center" ：规定内容对齐方式，center居中

width：设置表格的宽度

height：设置高度

格式：

<table border="1" align="center" cellspacing="5" cellpadding="5">
    <header>
        <th>1表头</th>
        <th>2表头</th>
    </header>
    <tbody>
        <tr>
            <!--第一行 -->
            <td>1单元格</td>
            <td>2单元格</td>
        </tr>
        <tr>
            <!--第二行 -->
            <td>1单元格</td>
            <td>2单元格</td>
        </tr>
    </tbody>
</table>

5.表单标签

表单可以收集用户输入的信息。

`<form>`

定义表单，用户输入的信息都要包含在form标签中，点击提交后，<form>和</form>里面包含的数据将被提交到服务器。

<form action＝"url" method=get|post name="myform" ></form>

name：表单提交时的名称
action：提交到的地址
method：提交方式，默认为get

5.1表单控件

每个表单元素都可以定义一个name属性，指定控件的名称。当提交信息时，会作为区分用户所填数据的标识发送给后台。

单行文本输入框 txt

<input type="text>
outline: none;去除焦点边框

密码输入框

<input type="password">

单选按钮

<input type="radio">

注意：name 属性一致就行

多选框

<input type="checkbox">

文件上传

<input type="file">

下拉框

<select name="你的城市">
           <option value="北京">北京</option>
           <option value="上海">上海</option>
           <option value="广州">广州</option>
           <option value="深证" selected>深证</option>
</select>
// value属性用来给<option>指定的那一个选项赋值
// selected 是否被选中

多行文本输入框

<textarea name="jianjie" cols="19" rows="5"></textarea>

cols 宽

rows 高

 <input type="image" src="" alt="">

提升用户体验

通过label的for指向按钮的id来绑定，for和id属性的值要相同

<label for="一致">点击</label>
<input type="text" name="sex" id="一致"/>

电子邮件类型

<input type="email"/>

搜索类型

<input type="search"/>

URL类型

<input type="url"/>

颜色类型

<input type="color"/>

数字类型

<input type="number"/>

日期类型

<input type="date" />

周类型

<input type="week" />

月份类型

<input type="month" />

范围类型(滑块)

<input type="range" min="0" max="100" step="2"value="80"/>

属性：min：范围的下限值; max：范围的上限值; step：声明该值递增或递减的步长; value：设置初始值

规定范围内的数量值

low以下安全(绿色) low–high (黄色) high以上(红色)

<meter value="81" min="0" max="100" low="60" high="80"></meter>

进度条

<progress value="22" max="100"></progress>

普通按钮

<input type="button">

图片按钮

<input type="image">

提交按钮

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

重置按钮

<input type="reset" value="重置">

普通按钮

5.2表单属性

required必填项,不填页面提交不了

placeholder=""文本框处于未输入状态时文本框中显示的输入提示。

disabled 禁用

readonly 只读

autofocus 元素自动获得焦点,一个页面只能有一个。

max="" 最大

min="最小

tabindex控制 input 标签按 tab 键获取到焦点的顺序

multiple 属性规定元素中可选择多个值。

autocomplete属性规定输入字段是否应该启用自动完成功能。属性值=on/off（启动/禁用）

novalidate关闭自带验证

小怪在家吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 基础知识(自用)

HTML第一章 HTML骨架<!DOCTYPE html><hr lang="en"><head>  <meta charset="UTF-8">
复制链接

扫一扫