青训入门之前端HTML

21 阅读3分钟

众所周知,前端语言作为一门标签语言,有着简单却又基础的功能。

下面将会列出基础html代码。

网页名

<title></title>

标题标签

标题标签<h1>......<h6> 共分为6个级别,1级最高,6级最小

    <h1>一级最大</h1>

段落标签

段落标签<p>....</p>

<p>我是一个段落标签</p>

注:段落与段落之间仍有较大的空隙

换行标签

换行标签<br />

该标签为单标签,在文字尾部添加

注:换行后段与段无空隙

 

文本格式化标签

加粗:<strong></strong>或<b></b>

倾斜:<em></em>或<i></i>

删除线:<del></del>或<s></s>

下划线:<ins></ins>或<u></u>

 

盒子标签

<div></div>

注:单独占一行

<span></span>

注:一行可放多个span

 

图像标签

<img src="图像URL">

注:img为单标签,src为img的必须属性

图像属性:

Alt 替换文本 当图片显示不出来是文字替换

Title 提示文本 鼠标放图像上显示的文字

Width 设置图像的宽度

Height 设置图像的高度

Border 设置图像的边框粗细

 没有先后区分 用空格分开

 

相对路径:

图片文件位于HTML文件同一级 如 <img src="baidu.gif" alt="">

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

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

绝对路径

输入具体位置或者网址

超链接标签

外部链接

\<a href= "跳转目标"target=”目标窗口的弹出方式”>从一个页面跳转到下个页面</a>

target的属性有:

_self在当前窗口打开(默认) _blank在新窗口打开

跳转目标:www.baidu.com

 

内部链接

当你在同一文件里创建了html文件,便可以使用该方式跳转

Href=”xxx.html”  

特别的

空链接 <a href=”#”>空链接</a>

如果href里面地址是一个文件或者压缩包,会下载这个文件

网页各种东西都可以带入超链接

 

锚点链接

点击链接,快速定位到页面某个位置

<a  href=”#two”>哈哈哈

在目标位置添加id属性

<h3 id=”two”>哈哈哈</h3>,便可以通过点击进行导航

 

注释标签

<!--我是注释--> 快捷ctrl+/

 

一些不显示的字符

如果我们需要他呈现空格,但是空格在html里是不直接显示的。我们需要使用以下方式进行替代:

`空格--&nbst

<--&lt

&--&amp

¥--&yen

©️--&copy

®️--&reg

℃--&deg `

 

表格标签

表格标签的作用是显示,展示数据

基本格式是:

<table>

<tr>

<td></td>

</tr>

</table>

Table 用于定义表格的标签(border=””/”1”,规定表格单元是否有边框)

Tr用于定义表格中的行

Td用与定义表格中的单元格(使用th可使表头加粗)

Th为表头单元格,可使单元格居中,加粗

表头<thead>

表身<tbody>

合并单元格

跨行合并:rowspan=“合并个数”

跨列合并:colspan=“合并个数”

列表标签

无序列表

<ul>

<li>列表项1</li>

。。。。。。

</ul>

不允许在ul标签里放其他标签,但可在li标签里放其他标签

有序列表

<ol>

<li>a</li>

<li>b</li>

......

</ol>

自定义列表

<dl>

<dt>名词1</dt>

<dd>解释1</dd>

<dd>解释2</dd>

</dl>

Dd围绕dt进行描述

表单标签

<form>会把表单信息提交给服务器

<form action=”url地址” method=”提交方式” name=”表单域名称”

各种表单元素控件

表单元素:

<input>输入(单标签)

必写属性type=””

单选框radio,要实现单选,需要属性name相同

复选也应该name相同

Value为默认值,即不输入时显示信息

在选择时,加入value可以返回信息

Check针对单选框和复选框,默认值,check=”check”

 

#### <label>标签

<label>标签为input元素定义标注(标签)。

<label>标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

下拉表单元素:

    Select

<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

。。。。。。

</select>