web前端之HTML

 2023-09-08 阅读 19 评论 0

摘要:超文本标记语言(Hyper Text Markup Language 简称HTML),是用来描述网页的一种语言,是通过网页内容在浏览器中显示出来。 超文本是可以加入图片、声音、动作、多媒体等内容,还可以跳转到另一个文件。 HTML语言基本的骨架 <!DOCTYPE html><html l

超文本标记语言(Hyper Text Markup Language 简称HTML),是用来描述网页的一种语言,是通过网页内容在浏览器中显示出来。

超文本是可以加入图片、声音、动作、多媒体等内容,还可以跳转到另一个文件。

HTML语言基本的骨架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
</html>

 

前端html5?1.HTML标签: 最大的标签,作用于所有HTML标签中的一个根节点

2.head标签: 文档的头部,描述文档的属性和信息,包括文档的标题、在web中的位置以及其他文档的关系等。绝大多数文档头部包含的数据都不是真正作为内容显示给读者。

注:在head标签中必须要设置title标签

3.title标签:文档的标题,让页面拥有一个自己的标题,通常与logo图片配合。

4.body标签:文档的主体,浏览器页面中显示的内容基本都是放在body中(比如文本、超链接、图片、列表、表格等等)

HTML标签分类

web前端都学什么?1.双标签

<标签名> 内容 </标签名>

 

2.单标签

<标签名 />

 

HTML标签关系

1.嵌套关系

<head><title></title>
</head>

html5网页前端设计? 

2.并列关系

<head></head>
<body></body>

 

注:两个标签之间有嵌套或者并列关系时,最好使用tab键,使之缩进对其。

文档类型

<!DOCTYPE html>

 

web网站前端开发,<!DOCTYPE>标签位与文档的最前面,用来向浏览器说明该文档是使用哪种HTML或XHTML标准规范,必需在开头处使用此标签,为所有的HTML或XHTML文件指定版本。

现在使用的一般是HTML5。

字符集

<meta charset="UTF-8" /> 

 

utf-8是目前最常用的字符编码方式,常用的字符编码方式gbk还有gb2312。

gb2312 简单中文 包括6763个汉字。

html前端开发、BIG5 繁体中文 港澳台等使用

GBK 包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312。

HTML常用标签

排版标签

标题标签

单词缩写 head

标题标签 <h1> 、<h2>、<h3>、<h4>、<h5>、<h6>
 

 

 标题标签语义:作为标题使用,并且依据重要性递减

<hn> 标题文本 </hn>

 

段落标签

web前端要求会哪些?单词缩写 paragraph

 

<p> 文本内容 </p>

 

把网页中文字有条理地显示出来,就如我们平时写文章一张,整个网页也可以分为若干个段落。

HTML文档中最常见的标签,默认情况下,文本会根据浏览器窗口的大小自动换行。

水平线标签

web前端div。单词缩写 horizontal

<hr />是单标签

 

在网页中显示默认样式的水平线

换行标签

单词缩写 break

 

<br />单标签

java web? 

强制的进行换行。

div span标签

单词缩写 division span

 

<div> 这是头部 </div>  <span> 今日价格</span>

div span 是没有语义的,是网页布局主要的2盒子

文本格式化标签

前端、在网页中将文字设置成粗体、斜体、删除线、下划线

 

<b></b> <strong></strong>  文字以粗体方式显示(XHTML推荐使用strong)
<i></i> <em></em>  文字以斜体方式显示(XHTML推荐使用em)
<s></s> <del></del>  文字以加删除线方式显示(xhtml推荐使用del)
</u></u> <ins></ins>  文字以加下划线方式显示(xhtml不赞成使用u)

 

 

 

前端html。b i s u 只有使用没有强调的意思 strong em del ins 语句更加强烈

标签属性

对标签加一些属性,进行装饰

<标签名 属性1="属性" 属性2="属性" ...> 内容 </标签名>
<hr width="400" /> 属性 宽度 值 400

 

1.标签可以拥有多个属性,必须写在开始标签中,标签名后。

2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

web前端工资一般多少?3.任何标签的属性都有默认值,省略该属性就是默认取消默认值。

注: 尽量不知用样式属性

图像标签img

单词缩写 image

 

<img src="图像URL">

 

 

 

src(必填)  URL  图像的路径  

alt  文本  图像不能显示时的替换文本

title  文本  鼠标悬停时显示的内容

width  像素  这是图像的宽度

height  像素  设置图像的高度

border  数字  这是图像边框的宽度

可以在网页中显示图像,并这是图像的相关属性

链接标签

单词缩写 anchor

<a href="跳转目标" target="目标窗口的弹出方式">  文本或图像 </a>

 

href  用于指定链接目标的url地址,当该标签应用href属性时,它就具有了超链接的功能。

target  用于指定链接页面的打开方式,_self 和 _blank 两种取值,self默认,blank在新窗口中打开方式。

注:

1.外部链接 需要添加 http://

2.内部链接 直接链接内部页面名称即可 如 <a href="index.html> 首页</a>

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

锚点定位

1.使用<a href=""#id名">链接文本</a> 创建链接文本 (被点击的)<a href="#two">
2.使用相应的id名标注跳转目标的位置<h3 id="two">跳转目标</h3>

 

通过创建锚点链接,用户能够快速定位到目标内容。

base标签

可以设置整体链接的打开状态

base写到<head></head>之间,把所有的链接都默认添加 target="_blank"

特殊字符标签 

空格符  &nbsp>  大于号  &gt<  小于号  &lt&  和号  &amp¥  人民币  &yen©  版权  &copy 
® 注册商标  &reg

℃  摄氏度  &deg
±  正负号  &plusmn
*  乘号  &times
/  除号  &divvid
²  平方  &sup2
³  立方  &sup3

注释标签

<!--注释语句--> ctrl + /  或者 ctrl + shift + /

 

注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

路径

分为绝对路径和相对路径

相对路径

以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如img src="logo.gif" /。图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如img src="img/img01/logo.gif" /。图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如img src="../logo.gif" /。

 

绝对路径

绝对路径以web站点根目录为参考基础的目录路径,意指当所有网页引用同一个文件时,所使用的路径都是一样的

“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gi

“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。

 

列表

分为无序列表、有序列表和自定义列表,列表最大的特点就是 整齐、整洁、有序。

无序列表(ul)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>

 

<ul type="">

默认  实心圆

square  方形圆实

circle  空心圆

如:新闻就是没有顺序的,不用排队,先到先得,现发布先显示。

有序列表(ol)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>

 

 <ol type="">

默认  数字

I  大写罗马字母

i  小写罗马字母

A  大写应为字母

a  小写英文字母

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>

 

表格table

表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。

创建表格的基本语法:

<table>
  <caption>表格标题</caption><tr><td> 单元格内的文字</td>...</tr>... </table>

 

1.table用于定义一个表格
2.tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含挤兑tr,就有几行表格。
3.td /td 用于定义表格中的单元格,必须嵌套在<tr></tr>中包含挤兑<td></td>,就表示该行中有多少列(或多少单元格)。

 

注:

<tr></tr>中只能嵌套<td></td>

<td></td>标签,他就像一个容器,可以容纳所有的元素。

表格属性

border  像素值  设置表格的边框(默认border=“0” 无边框)cellspacing  像素值  设置单元格与单元格之间的空白间距cellpadding  像素值  设置单元格内容与单元格边框之间的空白距离width  像素值  设置表格的宽度
height  像素值  设置表格的高度
align  left、center、right  设置表格在网页中的水平对齐方式

 

 

三参为0  border  cellpadding  cellspacing 为0

表头标签

表头单元格一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。

设置表头非常简单,只需用表头标签th</th替代相应的单元格标签td</td即可。

<table><th></th>
</table>

 

表格结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:
<thead></thead>:用于定义表格的头部。必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。<tbody></tbody>:用于定义表格的主体。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

 

表格标题

<table><caption>表格标题</caption>
</table>

 

caption标签必须紧随在table标签之后,只存在表格里面,是位与表格之上的标题。

合并单元格

跨行合并:rowspan

跨列合并:colspan

单元格合并思想:将多个内容合并的时候,就会有多余的东西,把它删掉。

1.先确定是跨行还是跨列合并

2.根据先上 后下 先左 后右的原则找到目标单元格

3.删除单元格 删除的个数 = 合并的个数 - 1

表单标签

现实中的表单,类似我们填的单子。表单的目的是为了手机用户的信息。在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要用到表单。

在HTML中,一个完整的表单通常由表单控件(表单元素)、提示信息、表单域三部分构成。

表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:一个表单通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

 

input控件

<input />标签为单标签,tpye属性为最基本的属性类型,控制指定不同的控件类型。

            text         单行文本输入框password     密码输入框radio        单选按钮checkbox     复选框
type button 普通按钮submit 提交按钮reset 重置按钮image 图像形式的提交按钮file 文件域name 由用户自定义 控件的名称 value 由用户自定义 input控件中的默认文本值 size 正整数    input控件在页面中的显示宽度 checked checked   定义选择控件默认被选中的项 maxlength 正整数    控件允许输入的多的字符数

 

注:

type说明了属于哪种表单

radio 如果是一组,我们必须给他们命名相同的名字 name,这样就可以多个选其中的一个了。

label标签

label 标签为 input 元素定义标注(标签)。在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:

<thead></thead>:用于定义表格的头部。

必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。

<tbody></tbody>:用于定义表格的主体。

位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

table

作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type=k"radio" name="sex" id="male" value="male">

 

textarea控件

text  文本框  只能写一行文本

textarea  文本域

<textarea cols="每行中的字符数" rows="显示的行数">文本内容
</textarea>

 

下拉菜单

使用select控件定义下拉菜单的基本语法格式

<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>

注:

1.<select></select>中至少应包含一队<option></option>

2.在option中定义selected="selected"时,当前项即为默认选中项。

 

表单域

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

<form action="url地址" method="提交方式" name= "表单名称">各种表单控件
</form>

 

常用属性:

1.action  在表单收集到信息后,需要将信息传递到服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。

2.method  用于设置表单数据的提交方式,其取值为get或post。

3.name  用于指定表单的名称,以区分统一页面中的多个表单。

注:

  每个表单都应该有自己的表单域。

 

 

文档查阅:

W3C: http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

 

转载于:https://www.cnblogs.com/yinjin/p/10723151.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/3/20429.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息