前端基础之Html、CSS、JavaScript、JQuery、Ajax

最新推荐文章于 2023-08-04 20:36:41 发布

pybstudyjava

最新推荐文章于 2023-08-04 20:36:41 发布

阅读量1.8k

点赞数 1

文章标签： java html

本文链接：https://blog.csdn.net/pybstudyjava/article/details/123833168

版权

前端

1.HTML

XML：可扩展标记语言
XHTML：可扩展的超文本标记语言

1. HTML 概述

HTML：超文本标记语言

网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频

网页文件的格式：htm ，html

网页的注释：

html 结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>头部标题</title>
    </head>
    <body>
    	网页内容所在位置
    </body>
</html>

2. 标记

标记的语法
```
<起始标签 属性名="值" ......> 被标记的内容</结束标签>
```
注意：
1. 不区分大小写（个别浏览器区分）
2. 一般标记都是成对出现，极少数单独出现
3. 标签可以相互嵌套，但不可交叉嵌套（属性如果其冲突，就近原则）
标签分类：
1. 块级标签：有换行，有宽高，外边距正常，块级标签和行级标签都可以放
2. 行内标签：没有换行，宽高无效，上下外边距无效，只能放文字和行级标签，不能放块级标签
如果要给服务端提交数据，表单中的组件必须有 name 和 value 属性。用于给服务端获取数据方便

特殊字符

&nbsp; 空格
&gt; 	>
&lt; 	<
&quot; 	"
&amp; 	&
&copy; 	版权©
&reg; 	注册®

标记

常用标记

标题：<hn="1...6" align="left|center|right" ></hn>
段落：<p align="left|center|right"></p>
字体：<font size="1-7" color="颜色" face="字体风格[黑体]"></font>
    <i>斜体</i>		  <em>斜体</em>
    <b>加粗</b>		  <strong>加粗</strong>
    <u>下划线</u>		 <ins>下划线</ins>
    <s>删除线(贯穿线)</s><del>删除线</del>
    <sub>下标标识</sub>
    <sup>上部标识</sup>

换行：<br/>
居中：<center></center>
元信息：<meta />
预定义：<pre></pre>
地址：<address></address>
音频：<embed src=""></embed>
水平线：<hr size="粗细" color="颜色" width="长度" align="center|left|right" noshade(3D 凹凸效果)/>
滚动：<marquee direction="left|right|down|up" scrollamount="滚动速度"
	behavior="scroll(重复)|slide(不重复)|alternate(来回滚动)" 
    loop="滚动次数-1" scrolldelay="两次之间的有延迟 值越大越明显的停顿"> </marquee>
页面排版：<div> </div>

图片标记：img

<img src="路径" width="长度" height="高度 px" alt="加载失败" title="标题"/>

链接标记：a

文本链接

<a href="路径" target="_self|_blank(新窗口打开)" title="提示">百度</a>

图片链接：可做图片按钮

<a href="链接路径" title="提示"><img src="图片路径" alt="图片加载失败" title="提示"/></a>

锚连接：一般用于当前页面位置的跳转

<a name="锚名字" href="">首页</a>
<a href="#锚名字">跳转到首页</a>

表格

完整版

<table>
    <caption>标题</caption>
    <thead>
    	<tr><th></th></tr>
    <thead>
    <tbody>
    	<tr><td></td></tr>
    </tbody>
    <tfoot>
    	<tr><td></td></tr>
    </tfoot>
</table>

属性

table 表格

border: 	边框粗细
bordercolor:边框颜色
width:		宽度
height:		高度
bgcolor:	背景颜色
background:	背景图片
cellspacing:单元格与单元格之间的距离
cellpadding:单元格与数据之间的距离

tr 行

align:left|center|right 		 水平位置
valign:middle 中|top 上|bottom 下 垂直位置
height:
width:
bgcolor:
background:背景图片

td|th 列（th 列属于首列，自动居中加粗）

align:left|center|right 		 水平位置
valign:middle 中|top 上|bottom 下 垂直位置
height:
width:
bgcolor:
background:	背景图片
rowspan:	合并行
colspan:	合并列
# 合并行列：数格子,数过的格子不能再数

列表

有序列表

<ol type="1|A|a|I|i" start="阿拉伯数字从哪里开始">
	<li type="1|A|a|I|i"></li>
</ol>

无序列表

<ul type="disc(实心圆)|circle(空心圆)|square(正方形)">
	<li></li>
</ul>

自定义列表

<dl>
    <dt> 小标题 </dt>
    <dd> 内容 </dd>
</dl>

表单 form、input、select、textarea

表单：是页面提供客户端输入信息的元素的统称，包括表单和表单元素

如果要给服务端提交数据，表单中的组件必须有 name 和 value 属性，用于给服务端获取数据方便

<form action="url 提交地址" method="get|post" name="formname">
       <fieldset>
          <legend>基本信息</legend>
    文本框:<input type="text" name="" size="" maxlength="" value="默认值"/>
    密码框:<input type="password" name="" size="" maxlength="" value="默认值"/>
    单选框:<input type="radio" name="sex" value="" checked="checked"/>提示符
    多选框:<input type="checkbox" name="" value="" checked="checked"/> 提示文字
    隐藏文本:<input type="hidden" name="" value=""/>
    上传文件:<input type="file" name=""/>
       </fieldset

最低0.47元/天解锁文章

pybstudyjava

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端基础之Html、CSS、JavaScript、JQuery、Ajax

前端1.HTMLXML：可扩展标记语言XHTML：可扩展的超文本标记语言1. HTML 概述HTML：超文本标记语言网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频网页文件的格式：htm ，html网页的注释：html 结构<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
复制链接

扫一扫