HTML学习旅程（全）

最新推荐文章于 2023-04-26 00:16:09 发布

闽日桦上

最新推荐文章于 2023-04-26 00:16:09 发布

阅读量93

点赞数

文章标签：前端框架前端

本文链接：https://blog.csdn.net/weixin_45394944/article/details/128427857

版权

前言

在我们学习HTML（超文本标记语言）之前，先说明一下HTML、CSS、JS三者之间的关系。HTML是仅仅描绘框架的，CSS则是在HTML框架基础上再进行描绘、添色的，JS是在添色后的框架上再进行赋予它一些动画或动作的语言。这三者组成在一起就会呈现出咱们平时浏览的网页一样漂亮好看啦。

使用工具

HBuilder X

基础语法

1.标签

单标签

               无属性<标签名 />

               有属性<标签名属性名=‘属性值’ />

双标签

无属性<标签名> </标签名>

有属性<标签名属性名=‘属性值’ > </标签名>

2.整体结构

<html></html>表示当前是一个页面

<head><head/>头部信息

<body></body>身体部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础语法</title>
		<!-- ctrl+?表示注释，上面的title的内容显示再地址栏里，是页面的标题 -->
		<link rel="stylesheet" href="引入css文件路径" />
		<script src="引入JS文件路径" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
	</body>
</html>

3.标题和水平线

标题标签 <h1></h1> ~<h6></h6> 依次从大到小的显示，不建议在页面中写多个h1标签。

水平线标签   <hr />

属     性

             width 宽度单位：百分比、px（像素）

             align 对齐方式 left、right、center（默认）

             size 水平线粗细整数数字

4.段落与换行

段落标签<p></p> 段落可以自动换行，其常用属性是align=“left”默认居左对齐，align=“right”居右对齐，align=“center”居中对齐，align=“justify”分散对齐。

换行标签<br /> 或者<br >

5.列表

无序列表格式

<ul>                         常用属性：type列表图标

     <li></li>                       square实心方块
       <li></li>               circle空心圆
</ul>    disc实心圆默认

有序列表格式

<ol>                         常用属性：type列表图标

     <li></li>                    数字序号
       <li></li>                  大小写字母
</ol> 大小写罗马字母

6.div与span

div标签属于层与层、块与块级间的元素，标签会自动换行，常用于布局。常用属性是align表示div元素内容的对齐方式。<div></div>

span标签属于块与块、行与行级间的元素，标签不会自动换行。 <span></span>

7.格式化标签

font标签是设置字体相关的属性标签。<font></font>

color 字体的颜色设置
size 字体的大小设置
face 字体的风格显示

特别的pre标签是定义与格式化的文本，保留文本中的空格与换行格式，文本呈现等宽字体<pre></pre>。

粗体标签①<b></b>

②<strong></strong>

斜体标签<i></i>

下划线标签<u></u>

中划线标签<del></del>

下标标签<sub></sub>

上标标签<sup></sup>

8.超链接

用于从一个页面链接到另外一个页面，行内元素不会自动换行

<a href="链接路径"></a>

常用属性：

        href         必须属性（如果没有设置该属性，则a标签与普通文本没有区别）

        target      窗口打开方式--->_self当前窗口打开（默认）_blank新打开空白窗口显示

                                                  _parent子窗口打开             _top从上边的窗口打开

锚点①href属性指向a标签的name属性值

②href属性指向其他标签的id属性值
<h1><a name="nr1"></a>内容一</h1>
<h1 id="ii">内容三</h1>

<a href="#nr1">锚点1</a>
<a href="#ii">锚点2</a>

9.图片

img标签属于行内标签，不会自动换行

<img src=" 图片路径"

          title=“ 当鼠标停在图片上时显示的文字”

alt="当图片显示错误时显示的文字"

          width="200px"

          height="200px"

          border="2"

          align=“center”/>

注：border边框，align对齐方式，规定如何根据文本来排列图像

10.表格

tr     表示表格中的一行（每行中可以包含一个或者是多个td、th）

td    表示表格中的标准单元格

th    表示表格中的表头单元格（具有标题的效果，字体加粗，居中显示）

table常用属性

        border       表格的边框

        width    表格的宽度

                          单位是像素值或者百分比

        height        表格的高度

        align        表格的对齐方式（left、right、center）

tr常用属性

         align     每一行中的文本内容的水平对齐方式（left、right、center）

         valign   每一行中的文本内容的垂直对齐方式

         bgcolor    设置行的背景颜色

合并单元格：纵向合并rowspan

横向合并colspan

11.表单

form用于向服务器传输数据，是属于块级元素，其前后会产生折行。表单提交时，必须设置表单元素的name属性值，否则无法获取数据。

常用属性

       action          提交表单的地址

       method    提交方式： get提交+post提交

       target         提交数据时打开窗口的方式： _self 当前窗口    _blank空白窗口

注：所有标签共有的属性：

id属性用来标识元素的唯一属性
name属性提交数据时的参数名
style属性设置元素的行内样式（具体样式）
class属性设置元素的样式名

注：get请求与post请求的区别（一般在面试的时候考官会问的）

1.get请求时参数会跟在浏览器地址栏的后面；而post请求不会，会将数据存放在请求体中，并需要服务器的支持。

2.get请求相对于post请求而言，不那么安全

3.get请求传递的数据长度是有限的，而post请求基本没有限制

4.get请求比post请求快（2倍左右）

5.get请求有缓存，会将数据存放在浏览器中，即本地磁盘，而post请求无缓存

12.input标签

属性
type 元素类型
value 元素的值
readonly 只读模式，不可更改
maxlength 最多输入的长度
disabled 禁用标签

属性
type	元素类型
value	元素的值
readonly	只读模式，不可更改
maxlength	最多输入的长度
disabled	禁用标签

        文本框<input type="text"value="zhangsan" maxlength="10" /><br />
		文本框<input type=" text" value="zhangsan" maxlength="10"
                     readonly="readonly"/><br />
		密码框<input type=" password" /><br />
		单选框<input type="radio" value="ss" name="sss" />男
              <input type="radio" value="dd" name="sss" />女
			  <br />
	    复选框<input type="checkbox" value="ss" name="s" />男
              <input type="checkbox" value="dd" name="s" />女
			  <br />
		文件域<input type="file" />
              <br />
		隐藏域<input type=" hidden" value="ss"/><br />
        普通按钮<input type=" button" value="普通按钮"/><br />
		提交按钮<input type="submit" value="提交按钮"/><br />
		重置按钮<input type="reset" value="重置按钮"/><br />
		日期框<input type=" datet" value=""/><br />

注：1.单选框与复选框都需要与name属性设置为一组。

2.如果是上传文件的表单，则表单需要设置为一个属性enctype="multipart/form-data"，提交方式为post。

3.没有name属性是无法提交数据的。

13.text area标签与label标签

text area：定义可输入多行文本的控件。cols文本的可见宽度，rows文本的可见行数。

label：for属性---当此属性与元素的id属性值一致时，点击label标签会自动与元素聚焦。

14.button标签

它是一种双标签，标签之间可以添加内容、文本、或者标签。

type="button"       普通按钮

type="submit"(默认)     提交按钮

type="reset"                 重置按钮

15.下拉框

<select   name=" city "   multiple="multiple" size="3" disabled="disabled">

      <option value="">请选择城市</option>

      <option selected="selected">上海</option>

      <option   disabled="disabled">北京</option>

      <option>广州</option>

</select>

select常用属性：multiple设置下拉框可多选；size设置下拉框可见选项数；disabled禁用元素

option常用属性：selected默认选中项；disabled禁用某个选项；value提交给服务器的选项值

注：如果设置了value属性值，则提交value的值；如果没有设置value属性值，则提交option标签中的文本值。

16.字符实体

< <
> >
空格  
版权 &copy

闽日桦上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习旅程（全）

HTML
复制链接

扫一扫

color	字体的颜色设置
size	字体的大小设置
face	字体的风格显示

id属性	用来标识元素的唯一属性
name属性	提交数据时的参数名
style属性	设置元素的行内样式（具体样式）
class属性	设置元素的样式名

HTML学习旅程（全）

前言

使用工具

基础语法

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