初始HTML基础

已于 2022-03-21 12:00:56 修改
阅读量724 收藏 1
点赞数
分类专栏： web前段 笔记 文章标签： html5
于 2022-03-19 19:21:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43711676/article/details/123546227
版权

请添加图片描述

初识HTML

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，
简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
超文本包括：文字，图片，链接，音频，视频，动画等。

W3C

W3C， 全称“World Wide Web Consortium （万维网联盟 ）”，
它简单来说是一个国际性的组织，负责统一制定与web相关的各项标准。
网页主要有三部分组成：
结构（Structure）：HTML、XML。
表现（Presentation）：CSS。
行为（Behavior）：DOM、ECMAScript。

网页基本信息

meta标签，描述性标签，它用来描述我们网站的一些信息，一般用来做SEO。

（1）Ajax

Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。

Ajax是前后端交互的技术，主要实现在前端。（不懂？！没关系，我们在Ajax教程中会讲解到）

（2）SEO

SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。

简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。

网页基本标签

标签描述
h1~h6标题标签
p段落标签
br换行标签
hr水平线标签
strong粗体
em斜体

注释和特殊符号

<!-- 注释-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于：&gt;<br/>
小于：&lt;<br/>
版权所有：&copy;</br>

图像标签

在HTML标签中, <img> 标签用于定义HMTL页面中的图像

属性说明
src必填，表示图片路径,路径分为绝对路径和相对路径，…/ 表示上一级目录。
alt替换文本，图像不能显示时显示的文字
title提示文本，鼠标放到图像上显示的文字
width设置图像宽度
height设置图像高度
border设置图像的边框粗细
<img src='1.jpg' alt='图片飞走了' title='美眉'  
		height="100px" width="220px" border="5px" />

<a> 超链接标签及应用

超链接标签

<a href="链接地址" target="目标窗口位置"> 文本或图像 </a>
<!-- 
	target="_blink" 新建窗口          
	 target="_self" 自身窗口（默认值）
 -->

文本超链接

<a href=“wellcom.html” target=“_blank”> 欢迎进入 </a>

图片超链接

<a href=“show.html” target=“_blank”>
	<img src=“image/spring.jpg” alt=“春天” title=“春天”>
</a>

锚链接

<!-- 解释：从位置甲跳转本页的位置乙，从位置甲跳转其他页的位置乙-->
创建跳转印记: <a name="maker">乙位置</a>
创造跳转链接：<a href="#maker" >甲位置</a>

功能性链接

<a href="mailto:service@qq.com">发邮件</a>

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href：必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
      _blank  在新标签打开
      _self   在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank" >点击我跳转到页面一</a>
<a href="https://www.bilibili.com"target=_self>点击我跳转到B站-</a>
<br/>
<!--锚标签
1.需要一个锚标记
2.跳转到标记（使用#）
3.实现页面间跳转
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>

<!--功能性链接
邮件链接：mailto:
QQ标签
-->
<a href="mailto:952812117@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我免费领取小电影" title="你好，加我免费领取小电影"/></a>
</body>
</html>

块元素和行内元素

1. 内联（行内）元素

内容撑开宽度，左右都是行内元素的可以排在一行，行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：

  • 设置宽高无效
  • 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
  • 不会自动进行换行

2. 块级（块状）元素

无论内容多少，该元素独占一行，块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：

  1. 能够识别宽高
  2. margin和padding的上下左右均对其有效
  3. 可以自动换行
  4. 多个块状元素标签写在一起，默认排列方式为从上至下

3. 行内块元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：

  1. 不自动换行
  2. 能够识别宽高
  3. 默认排列方式为从左到右

列表标签

列表标签：共三种列表，分别是dl标签、有序标签、无序标签。

<html>
	<head>
		<meta charset="UTF-8">
		<title>列表标签</title>
	</head>
	<body>
		<!--有序列表和无序列表-->
		喜欢的水果：
		<!--ul标签：无序列表标签
			  属性type：无序列表的类型：
			        disc：默认的
			        circle：空心原点
			        square：小正方形（实习的）
		-->
		<ul type="square">
			<!--li标签:列表项-->
			<li>苹果</li>
			<li>桃子</li>
			<li>香蕉</li>
			<li>火龙果</li>
			<li>桔子</li>
		</ul>
		<hr />
		<!--ol:有序列表
			type属性：指定当前有序列表的类型（l、a、A）
		-->
		您喜欢的音乐类型？
		<ol type="1" >
			<li>流行</li>
			<li>民谣</li>
			<li>摇滚</li>
		</ol>
		<!--dl: 自定义列表
			dt: 列表的上层内容 
			dd: 列表的下层内容 
		-->
		<dl>                                      
		      <dt>传智播客</dt>           
		      <dd>财务部</dd>           
		      <dd>人事部</dd>
		      <dd>学工部</dd>
		 </dl> 
	</body>
</html>

表格标签

元素名描述
caption表格标题
tr行
th,td单元格；（th表头标签）
cellspacing单元格与单元格间的距离
cellpadding文本与单元格间的距离
border表单边框线大小
rowspan跨行合并
colspan跨列合并
alight对齐方式
bgcolor背景色
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<!--table：表格标签
    		th：表头标签（自动加粗 居中显示）
    		tr：行标签
    		td：单元格标签
			属性：
        		border：边框线大小
        		width：表格的宽度
        		height：表格的高度
        		alight：对齐方式
        		bgcolor：背景色
		-->
		<table border="2"
				width="200"
				height="50"
				bgcolor="aquamarine">
			表1：
			<th>表头1</th>
			<th>表头2</th>
			<th>表头3</th>
			<tr align="middle">
				<td>(1,1)</td>
				<td>(1,2)</td>
				<td>(1,3)</td>
			</tr>
			<tr align="middle">
				<td>(2,1)</td>
				<td>(2,2)</td>
				<td>(2,3)</td>
			</tr>
		</table>
		<br />
		
		<table border="2" bgcolor="antiquewhite">
			表2（单元格的合并）：
			<!--单元格的合并：
        			colspan：合并列
        			rowspan：合并行	
           -->
			<th>表头1</th>
			<th>表头2</th>
			<th>表头3</th>
            <tr align="left">
				<td colspan="2">(1,1)</td>
				<td rowspan="2">(1,3)</td>
			</tr>
			<tr align="left">
				<td>(2,1)</td>
				<td>(2,2)</td>
			</tr>
		</table>
		<br />
		
		<table border="3" bgcolor="cadetblue">
		表3：thead,thead,tfoot
		<!--对表格中的行进行分组:
        	thead：表头
        	thead：正文
        	tfoot：脚注
        -->
		  <thead>
		    <tr>
		      <th>Month</th>
		      <th>Savings</th>
		    </tr>
		  </thead>
		 
		  <tfoot>
		    <tr>
		      <td>Sum</td>
		      <td>$180</td>
		    </tr>
		  </tfoot>
		 
		  <tbody>
		    <tr>
		      <td>January</td>
		      <td>$100</td>
		    </tr>
		    <tr>
		      <td>February</td>
		      <td>$80</td>
		    </tr>
		  </tbody>
		</table>

	</body>
</html>

媒体元素

HTML5新增了两个与媒体相关的标<audio>、<video>。可以在网页中嵌入跨浏览器的音频和视频内容。

<audio  src="音频文件"  id="myAudio">在浏览器不支持时显示的文本</audio>
<video src="视频文件" id="myVideo">在浏览器不支持时显示的文本</video>

其常用属性如下：

  • controls属性: 控制控件的显示，取值只能为controls。
  • autoplay属性: 布尔属性，自动播放。（可以不用书写属性值 ）
  • muted属性：布尔属性，静音播放。（可以不用书写属性值 ）
  • loop属性: 布尔属性，循环播放。（可以不用书写属性值 ）
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体元素学习</title>
	</head>
	<body>
		<audio src="./audio/许嵩 - 最佳歌手 [mqms2].mp3" controls autoplay loop>最佳歌手-许嵩</audio>
		<video src="./video/许嵩 - 雅俗共赏.mp4" controls autoplay muted width="400px" height="300px">雅俗共赏-许嵩</video>
	</body>
</html>

页面结构分析

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

header、footer、nav重要，其他了解即可。

iframe内联框架

使用iframe可以在一个表格内调用一个外部文件，非常有用。很多网站页面上都使用了iframe效果。

iframe标记的常用属性是:

　<iframe src="url" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe>
  • src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
  • width、height："内部框架"区域的宽与高；
  • scrolling：当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项；
    如果为 NO，则不出现滚动条；
    如果为Yes，则显示;
    如果为 Auto：则自动出现滚动条
  • frameborder：设置或获取是否显示框架的边框。(1，0 或 no，yes)
  • name：框架的名字，用来进行识别。

name 和 target属性经常用到，两个属性需结合使用，name是当前位置的名称，target 指定将要显示的内容到什么位置。当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。

初识表单post和get提交

表单 form

  1. action：表单提交的位置，可以为网站，也可以是一个请求处理地址

  2. method：post,get 提交方式：

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

  3. enctype：表单编码属性；提交时，包含有input type="file"时，需加。

  4. autocomplete：文本框中，输入一次，下次输入会自动提示。有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。用户每提交一次，就会增加一个用于选择的选项。

  5. novalidate： input输入类型，当提交表单时，会对这些输入内容进行验证。而novalidate属性则用于在提交表单时不对form或input进行验证。

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>登录注册</title>
	</head>
	<body>
	<h1>注册</h1>
	<!-- 表单form
		action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
		method: post , get 提交方式
		        get方式提交：我们可以在url中看到我们提交的信息， 不安全， 高效
		        post: 比较安全 ， 传输大文件
		enctype：表单编码属性
	-->
	<form action="1.html" method="post" enctype="multipart/form-data">
	    <!-- 文本输入框： input type="text"     -->
	    <p>名字: <input type="text" name="username"></p>
	    <!-- 密码框： input type="password"  -->
	    <p>密码: <input type="password" name="pwd"></p>
	    <p>
	        <input type="submit">
	        <input type="reset">
	    </p>
	</form>
	</body>
</html>
表单元素格式
input标签元素
元素名描述
type指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text。
name指定表单元素名称。
value元素的初始值。type为radio时必须指定一个值。
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlengthtype为text或password时，输入的最大字符数。
checkedtype为radio或checked时，指定按钮是否是被选中。
autofocus为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
readonly只读文本框
disabled禁用
hidden隐藏域
placeholder文本框输入内提示
required必填项
type属性值
属性值实例描述
textinput type=“text”文本框（默认），一般用于用户名或账号名。
passwordinput type=“password”密码框
radioinput type=“radio”单选框，value表示单选框的值，提交时所获取的值是value值；name表示组，同一单选框组名必须相同。
checkedinput type=“checked”多选框，
buttoninput tpye=“button”普通按钮
imageinput type=“image”图像按钮
submiinput type=“submit”提交按钮
resetinput type=“reset”重置
emailinput type=“email”邮件验证，会自动验证Email地址格式是否正确。
urlinput type=“url”URL验证，会自动验证URL地址格式是否正确。
numberinput type=“number”数字验证，min：允许的最小值，max：允许的最大值，step：合法的数字间隔。
rangeinput type=“range”滑块框，min：允许的最小值，max：允许的最大值，step：合法的数字间隔。
searchinput type=“search”搜索框
fileinput type=“file”文件域
列表框文本域和文件域

下拉框，列表框 select标签

	<!--
		select:列表框
		selected：默认选中项
		option：选项
	-->
 <select name="列表名称" size="行数">
        <option value="选项的值" selected="selected">…</option >
        <option value="选项的值">…</option > 
        <option value="选项的值">…</option > 
</select>

文本域 textarea

	<!--
		texttarea：多行文本域
		cols：显示行数
		rows：显示列数
	-->
<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

表单的应用

隐藏域-hidden语法

<input type="hidden" value="666" name="userid">

只读和禁用-语法

<input name="name" type="text" value="张三"  readonly>
 
<input type="submit "  disabled   value="保存" >

释义：
readonly：只读文本框
disabled：禁用

增强鼠标可用性
label for=“name”，锁定一个框，点击文字之后可以在框内输入。

<!--注意此处for的值要与id的值对应-->
<form>
	<p>
	<lable for="mark">点击我可以直接在文本框输入</lable>
	<input type="text" id="mark">
	</p>
</form>

表单初级验证

placeholder–语法

input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容 提示语默认显示，当文本框中输入内容时提示语消息
适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

释义：placeholder：文本框输入内提示

required-语法

规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

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

释义：required：必填项

pattern-语法

正则表达式由一系列字符和数字组成，用于匹配某个句法规则。该属性适应于text、search、url、telephone、email和password类型的input元素，用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

释义：pattttern：验证规则，正则表达式

  • 昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
  • 密码：pattern="[\dA-Za-z]{6,16}"
  • 手机号码：pattern=“1[3578]\d{9}”
  • 年龄：pattern="\d|[1-9]\d|1[0-2]\d"
辕小白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML页面初始化
06-16
重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。
初始HTML
weixin_33797791的博客
05-21 464
了解HTML 1.1 HTML的作用 HTML就是用来制作网页 1.2 什么是HTML HTML是英文HyperText Markup Language的首字母缩写，即超文本标记语言 超文本 - 网页中包含的图片、音频或者超链接等非文字元素 标 记 - 有特殊含义的符号 <br />含义：在网页中插入一个换行符，是HTML标签/元素，网页就...
HTML 01 初始
武林半侠的博客
10-29 194
HTML超文本标记语言 1.使用方法 文字 其中叫做标签，用包围关键字，成对出现，第一个叫做开始标签（开放标签），第二个叫做结束标签（闭合标签）。 2.HTML文档=网页，包含HTML标签和纯文本。 一个HTML文档就是一个网页，例如： 第一个标题。 注：HTML语言不区分大小写，但是标准都用小写。 3.编辑HTML工具 专业HTML编辑器有： ·
html5 实验9 JavaScript基础应用
12-22
图1-9-2 单击前初始状态页面 图1-9-3 单击“中”链接后页面 2．div中内容如下： JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的...
Angular.js基础学习之初始化
12-29
通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性...
基础css样式，设置了大量特殊的html标签的初始化样式，用起来很舒服
02-08
基础css样式，设置了大量特殊的html标签的初始化样式，用起来很舒服
01 基础.html
12-10
而初始值的内容是将来赋值的数据类型的基础值（数字的基础是为0）（字符串为空的引号‘’） 对象{}、数组[]、function(){} 变量的命名：关键字和保留字不能作为变量名 命名的规则：组成：英文qer 数字123 ...
python把文本转换为html-Python基础教程-把文本转为HTML格式.pdf
06-12
python把⽂本转换为html_Python基础教程——把⽂本转为 HTML格式 功能：将⽂本⽂件转换成html格式的⽂档。 ⽅法： 1.添加初始标签 2.智能分段 #util.py def lines(file): #遍历⽂本⽂件，⽤⽣成器保存每⾏ for line ...
初始HTML详解
m0_65878076的博客
03-10 614
1.HTML基本内容 1.1 HTML介绍 HTML 名字叫做超文本标注语言(Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言(markup language) HTML 是用来描述网页的一种语言。 HTML 使用标记标签来描述网页。 简单来说，英语字母img它就是英文字母，但是在html里面，如果它被加上<>之后就会在网页世界有显示图片的功能。 1.2HTML基本结构： 在电脑任意的位置，创建一个空白的记事本，在里面输入下列..
初始HTML 标签—1
kkkk_1112的博客
09-21 274
1、初识HTML HTML指超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。 学习目标： HTML的概念 HTML标签的分类、关系、语义化 网页是由网页元素组成的，这些元素利用HTML标签描述出来，然后通过浏览器解析，就可以显示给用户了。 ...
初始html(页面结构分析)
chaowang111的博客
10-20 140
header 标题头部区域的内容 (用于页面或页面中的一块区域)footer 标记脚部区域的内容(用于整个页面或页面的一块区域)section Web页面中的一块独立区域。aside 相关内容或应用(常用于侧边栏)article 独立的文章内容。nav 导航类辅助内容。
HTML 初始代码 基本
hellshura的博客
09-20 3688
HTML初始代码 每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。 <!DOCTYPE html> <!-- 告诉浏览器这是一个html文件 --> <html lang="en"> <!-- html文件的最外层标签：包裹这所有Html标签代码 lang=en 表示当前网页是一个英文网站 中文网站zh-CN--> <head> <meta charset="...
html初始
River的博客
11-07 606
html初始（1）html的标准的结构< ! doctype html> 声明文档类型 <html> 根标签 <head> 头标签 <title></title> 标题标签 </head> <body> 主体标签 </body></html> （2）html的快捷键 Html:xt+tab Html结
简述HTML
任晓帅
06-11 616
以前就觉得网页是件很好玩的东西，初次接触HTML很有意思。学起来也感觉没什么难的，在有兴趣的时候就会很开心的想去接触新知识，也感觉到都是一些学过的东西只是换了一个新的形式，不断丰富知识网。 超级文本标记语言（HyperText Markup Language）是标准通用标记语言下的一个应用，也是一种规范。（“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素...
HTML简介+初始格式
ACEhei的博客
10-19 699
HTML简介+初始格式 文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。 HTML被称为超文本标记语言，是因为文本中包含了所谓“超链接”的点，所谓“超链接”的点，就是一种URL（统一资源定位符）指针，通过光标点击它，可使浏览器方便快速的获取新的网页。这也是HTML获得广泛应用的‘最重要’的原因之一。 HTML是一种规范，一种标准，它...
echarts初始化theme
最新发布
08-11
// 引入主题基础样式 var theme = { // 在这里定义你的主题样式 }; // 将主题应用于 ECharts echarts.registerTheme('mytheme', theme); ``` 3. 在你的 HTML 文件中，使用 `<script>` 标签引入 `mytheme.js` 文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值