Web前端

最新推荐文章于 2024-05-08 19:49:56 发布

JianSinShen

最新推荐文章于 2024-05-08 19:49:56 发布

阅读量136

点赞数 1

分类专栏：前端学习文章标签： web html5

本文链接：https://blog.csdn.net/weixin_43684831/article/details/113769479

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Web前端

Web标准构成

结构：网页元素 HTML;
表现：表现形式 CSS;
行为: 交互 JavaScript;

HTML标签构成

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


-------------------------------------------------------------------
<!DOCTYPE>文档类型声明，告诉浏览器使用哪种HTML版本来显示网页
"en"为英语  "zh-CN"为中文网页
<meta charset="UTF-8">表示字符编码格式

<h1></h1>.......<h6></h6>	表示六个级别的标签
<p></p>	段落标签，将HTML代码分为若干段
<br />	换行标签
<strong></strong>	为文字设置粗体。同<b></b>
<em></em>	为文字设置斜体。同<i></i>
<ins></ins>	为文字设置下划线。同<u></u>
<del></del>	为文字设置删除线。同<s></s>

注:以上相同的，都比较推荐前面的

div和span区别

<div></div>	没有语义，是个盒子，分割分区，一行只能放一个div,大盒子
<span></span>	没有语义，是个盒子，跨度，跨距，一行可以放多个span,小盒子

图像标签

<img src = "图像URL" /> 用于定义HTML页面中的图像。

src	是img的必须属性，指定图像文件的路径和文件名
alt	替换文本，图像不能正常显示时出现的文本
title	提示文本，鼠标放到图像上显示的文字
width	设置图像宽度，单位像素
height	设置图像高度，单位像素
border	设置图像边框粗细，单位像素

图像路径分为两种：

绝对路径：从盘符开始,使用\
相对路径：以当前位置为参考基础，建立的目录路径,使用/

同一级目录：图像文件位于HTML文件同一级,如：<img src = "baidu.gif" />

下一级路径:<img src = "images/baidu.gif" />

上一级路径:<img src = "../baidu.gif" />

超链接标签a

1）外部链接，从一个页面跳转到另一个页面

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

2）内部链接，网站内部页面间相互跳转

<a href = "index.html"></a>

空链接:<a href = "#"></a>

下载链接：如果href里面地址是一个文件或者压缩包，就会下载该地址，如链接到.exe文件或者.zip文件

给图片加超链接

<a href = "www.baidu.com"><img src = "picture.jpg"></a>

音频，表格等按照同样形式都可以进行添加超链接

锚点链接:可以快速定位到页面某个位置

在链接文本href属性中，设置属性值为#名字形式(这里的名字形式为id的属性值，例如：<a href = "#two">第二季</a>

找到目标位置标签，里面添加一个id属性，<h3 id = "two">第二季介绍</h3>

<a></a>标签的属性

href	指定跳转到的URL地址
target	指定新页面打开方式，属性值见下行:
	_self为默认值，在当前窗口打开。_blank为在新窗口打开

HTML标签特殊字符

<!-- -->	注释
	一个空格距离
<	小于号<
>	大于号>
&	和号&
¥	人民币￥
©	版权那个符号，一个圈里面是个C
®	注册商标，一个圈里面是个R
°	摄氏度
±	正负号
×	乘号x
÷	除号
²	平方2
³	立方3

HTML表格标签

用于显示，展示数据

 <thead>表格的头部区域;
 <tbody>表格的身体区域;

---------------------------------------------
        
<table>
   <thead>
      <tr>
         <th></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
    	 <td></td>
      </tr>
   </tbody>
</table>

<table></table>	定义表格
<tr></tr>	定义表格中的行
<td></td>	定义表格中的单元格
<th></th>	表头单元格，表头会加粗居中显示

表格属性

属性名	属性值	描述
align	left/right/center	表格相对周围元素对齐方式
border	1或者""	表示表格单元是否有边框
cellpadding	像素值	单元边沿与内容间空白，默认为1px
cellspacing	像素值	规定单元格间空白，默认为2px
width	像素值或者百分比	规定表格的宽度
height	像素值或者百分比	规定表格的高度

合并单元格：将多个单元格合并为一个单元格

跨行合并: rowspan = "合并单元格个数"

跨列合并：colspan = "合并单元格个数"

序列标签

1.无序列表：<ul><li>列表1</li><li>列表2</li></ul>

<ul>中只能放<li>,<li>中什么都可以放

2.有序列表：<ol><li>列表1</li><li>列表2</li></ol>

<ol>中只能放<li>,<li>中什么都可以放

3.自定义列表

使用场景：常用于对于术语或者名词进行解释和描述

<dl>用于定义描述列表，会与<dt>定义项目/名字，<dd>描述每一个项目一起使用

语法格式:
<dl>
    <dt>大哥</dt>
    <dd>小弟1</dd>
    <dd>小弟2</dd>
    <dd>小弟3</dd>
</dl>

<dl>标签中只能放<dt>和<dd>

表单标签form

表单为了收集用户信息

表单组成:表单域、表单控件(表单元素)、提示消息

<form>标签用于定义表单域，实现用户信息收集和传递

<form>会把它范围内的表单元素信息提交给服务器

<form action = "URL地址" method = "提交方式" name = "表单域名称">

常用属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的URL地址
method	get/post	设置表单提交的方式
name	名称	指定表单的名称，来区分一个页面多个表单域

表单元素

属性值	描述
button	按钮，通常和js搭配使用
checkbox	复选框
file	供文件上传
hidden	定义隐藏的输入字段
image	定义图像提交按钮
password	密码框
radio	单选按钮
reset	重置按钮，清除表单中所有元素
submit	提交按钮，会把表单数据发送到服务器
text	单行输入字段，可以输入文本

check = "checked"表示默认勾选

maxlength = 正整数，规定了输入字段的字符最大长度

name和value为每个表单元素都有的属性值，主要给后台人员来使用。

要求单选按钮和复选框拥有相同的value值，checked属性主要针对单选框和复选框，表示默认勾选。

radio时name属性值相同才能实现多选一。

 <input type="radio" name="radiobutton" value="radiobutton" checked="checked">喜欢
 <input type="radio" name="radiobutton" value="radiobutton"> 不喜欢
 <input type="radio" name="radiobutton" value="radiobutton">无所谓<br />

<input type="checkbox" name="checkbox1" value="checkbox" checked="checked">跑步
<input type="checkbox" name="checkbox2" value="checkbox">打球
<input type="checkbox" name="checkbox3" value="checkbox">登山
<input type="checkbox" name="checkbox4" value="checkbox">健身<br />

绑定表单元素和文字：

<label>标签为input元素定义标注，绑定一个表单元素，当点击标签内文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，来增加用户体验。

语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

注：for的属性值必须和后面的id属性值相同。

下拉列表标签

select下拉表单元素，在页面中，如果有多个选项让用户选择，可以使用下拉列表，使用<select>控件来定义下拉列表。

语法:
<select>
   <option>选项一</option>
   <option selected="selected">选项二</option>
   <option>选项三</option>
</select>

文本域标签

textarea文本域标签，当用户输入文本过多时使用

<textarea rows="3" cols="10">文本内容</textarea>

cols = "每行的字符数" rows = "显示的行数"

实际开发时使用CSS来调整

JianSinShen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录