前端入门-html

最新推荐文章于 2024-06-20 22:53:58 发布

318万岁

最新推荐文章于 2024-06-20 22:53:58 发布

阅读量79

点赞数 1

分类专栏：前端入门文章标签： html

本文链接：https://blog.csdn.net/weixin_46274352/article/details/115558493

版权

前端入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习

Hyper Text Markup Language(超文本标记语言)

超文本包括:文字,图片,视频,音频,动画

W3C标准包括:

结构化标准语言(HTML,XML)

表现标准语言(CSS)

行为标准(DOM,ECMAScript)

HTML基本结构

<html>
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签,它用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <!--title网页标题-->
	<title>标题</title>    
</head>
<!--body标签代表网页主体-->    
<body>
主体部分    
</body>
</html>

< body>,< /body>等成对的标签,分别叫开放标签和闭合标签

单独呈现的标签(空元素),如< hr/>;意为用/来关闭空元素

网页基本标签

标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

<p>段落标签</p>

换行标签

<!--换行,单标签-->
<br/>

水平线标签

<!--水平线,单标签-->
<hr/>

字体样式标签

<!--粗体和斜体-->
<strong>粗体标签</strong>
<em>斜体标签</em>

特殊符号

空格: &nbsp;

大于: &gt;

小于: &lt;

图像标签

src:图像地址(必填)

alt:图像的代替文字(必填)

title:鼠标悬停提示文字

width:图像宽度

height:图像高度

<img src="path" alt="text" title="text" width="x" height="y" />

链接标签

href:链接路径

target:链接在哪个窗口打开

target常用值:

_self 在本页面打开
_blank 在新页面打开

<a href="path" target="目标窗口位置">链接文本或图像</a>

图像超链接

可以实现插入图片

<a href="path" target="目标窗口位置">
	<img src="path" alt="text" title="text" width="x" height="y" />
</a>

锚链接

可以实现回到顶部

<!--使用name作为标记-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

功能性链接

邮件链接:mailto

<a href="mailto:123456@csdn.com">点击即可打开邮件</a>

行内元素和块元素

块元素,无论内容多少,该元素独占一行,例如:p , h1-h6…

行内元素,内容撑开宽度,左右都是行内元素的可以排在一行,例如:a , strong , em…

列表

列表就是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷地获得相应的信息

列表分类:

无序列表
有序列表
定义列表

<!--无序列表-->
<ul>
    <li></li>
    <li></li>
</ul>
<!--有序列表-->
<ol>
    <li></li>
    <li></li>
</ol>
<!--定义列表-->
<dl>
    <dt>列表名称</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
</dl>

表格

表格的优点:简单通用,结构稳定

基本结构: 单元格 , 行 , 列 , 跨行 , 跨列

table:表格 tr:行 td:列

colspan:跨列

<!--创建两行三列-->
<table>
    <tr>
        <!--colspan跨列-->
    	<td colspan="3"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <!--rowspan跨行-->
    	<td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
</table>

媒体元素

视频video

src: 资源路径

controls: 控制条

autoplay: 自动播放

<video src="path" controls autoplay></video>

音频audio

src: 资源路径

controls: 控制条

autoplay: 自动播放

<audio src="path" controls autoplay></audio>

页面结构

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面内的一块区域)
section	web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

内联框架

src: 资源路径

width: 宽度

height: 高度

<iframe src="path" name="mainFrame" width="x" height="y"></iframe>

表单

metod规定如何发送表单数据,常用值: get , post

get方式:高效,不安全,可以在url中看到提交的信息
post方式:比较安全,可以传输大文件

action表示向何处发送表单数据,可以是网站也可以是一个请求地址

<form method="post" action="result.html">
    <p>姓名:<input name="text" type="username"></p>
    <p>密码<input name="password" type="password"></p>
    <p>
    	<input type="submit" name="Button" value="提交">
        <input type="rset" name="Rset" value="重填">
    </p>
</form>

表单元素格式

属性	说明
type	指定元素的类型.text , password , checkbox , radio , submit , reset , file , hidden , image和button,默认为text
name	指定表单元素的名称
value	元素的初始值.type为radio时必须指定一个值
size	指定表单元素的初始宽度.当type为text或password时,表单元素的大小以字符为单位.对于其他类型,宽度以像素为单位
maxlength	type为text或password时,输入的最大字符数
checked	type为radio或checkbox时,指定按钮是否被选中

文本框

text: 单行文本

value: 默认初始显示值

maxlength: 最长能写几个字符

size: 文本框的长度

<input type="text" value="null" maxlength="x" size="y">

单选框

redio: 单选

value: 单选框的值

checked: 定义为默认选择值

<input type="redio" value="boy" name="sex" checked>男
<input type="redio" value="gril" name="sex">女

多选框

checkbox: 多选

value: 多选框的值

checked: 定义为默认选择值

<input type="checkbox" value="java" name="hobby" checked>爱好java
<input type="checkbox" value="C++" name="hobby">爱好C++
<input type="checkbox" value="python" name="hobby">爱好python

按钮

button: 按钮

value: 按钮上的文字

image: 图片按钮

src: 图片路径

submit: 提交按钮

reset: 重置按钮

<input type="button" name="btn1" value="点击">
<input type="image" src="path">
<input type="submit">
<input type="reset">

列表框,下拉框

select: 下拉列表

option: 选项

value: 选项名称

selected:定义为默认选择值

<select name="列表名称">
    <option value="选项值" selected>java</option>
    <option value="选项值">C++</option>
    <option value="选项值">python</option>
</select>

文件域

file: 选择(要上传的)文件

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

文本域

textarea: 文本域

cols: 列数

rows: 行数

<textarea name="textarea" cols="10" rows="">文本内容提示</textarea>

邮件验证

<input type="email" name="email">

URL

<input type="url" name="url">

数值数量

max: 限定最大值

min: 限定最小值

step: 设置步长

<input type="number" name="num" max="100" min="0" step="1">

滑块

max: 限定最大值

min: 限定最小值

step: 设置步长

<input type="range" name="voice" max="100" min="0" step="2">

搜索框

<input type="search" name="search">

点击效果

label标签可以实现鼠标点击文字,进入输入状态

在for中填入其他标签的id值

<label for="mask"></label>
<input type="text" id="mask">

提示信息

placeholder在输入框内显示提示信息,鼠标点击即消失

<input type="text" name="username" placeholder="请输入用户名">

强制输入框非空

required强制输入值,否则无法提交

<input type="text" name="username" placeholder="请输入用户名" required>

正则表达式

pattern可调用正则表达式

<input type="text" name="rname" pattern="正则表达式">

318万岁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门-html

HTML学习Hyper Text Markup Language(超文本标记语言)超文本包括:文字,图片,视频,音频,动画W3C标准包括:结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScript)HTML基本结构<html><head>  <meta charset="UTF-8"&gt
复制链接

扫一扫