HTML知识汇集

最新推荐文章于 2024-08-04 21:23:42 发布

m0_59090542

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量152

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_59090542/article/details/123155457

版权

一.HTML初识

1.Html指超文本标记语言

Html不是一种编程语言，而是一种标记语言

总结：HTML作用是标记标签来描述网页，把网页内容在浏览器中显示出来

2. HTML骨架格式

Html有自己的语言语法骨架格式

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>我是标签</title>
    </head>
    <body>
    </body>
</html>

3.HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>我是标题</h1>
<h2>我是标题</h2>

4.HTML 段落

<p>我是段落</p>
<p>第二个段落</p>

5.HTML链接

target=”目标窗口弹出方式”

Target:self默认 blank新窗口打开

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

<a href="https://www.baidu.com">百度</a>

6.HTML图像

Alt图像不能显示时替换文本

Title 鼠标悬停显示的内容

Border 图像边框的宽度

<img src="/images/logo.png"  width="100" height="50"  />

7. HTML标签关系

嵌套关系：

<html>
     <head>
     </head>
 </html>

并列关系：

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

8.HTML文本格式化

文本加粗：<b></b> <strong></strong>

文本斜体：<i></i> <em></em>

文本加删除线：<s></s> <del></del>

文本加下划线：<u></u> <ins></ins>

水平线标签：<hr />

换行标签：<br />

9.HTML<base>元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:创建瞄点链接，快速定位目标

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

10.HTML<link>元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

11.HTML<style>元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:red}
p {color:blue}
</style>
</head>

12.HTML<script>元素

13.特殊字符标签

空格符 

小于号&lt

大于号&gt

14.HTML列表

list-style:none取消列表默认样式
list-style: circle;列表的空心圆
square列表的正方形
upper-roman列表罗马数字
lower-alpha列表字母
decimal数字

(1)有序列表

<ol>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
</ol>

(2)无序列表

 <ul>
     <li>xxxx</li>
     <li>xxxx</li>
     <li>xxxx</li>
</ul>

(3)自定义列表

<dl>
      <dt>xxxxx</dt>
      <dd>xxxxx</dd>
      <dd>xxxxx</dd>
      <dt>xxxxxx</dt>
      <dd>xxxxx</dd>

</dl>

15.HTML表格

<table style="text-align: center;" border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>19</td>
				<td>女</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>20</td>
				<td>男</td>
			</tr>
</table>

table表格

(1).border:设置表格·的边框，默认值为“0”

cellspacing:设置单元格与单元格边框之间的空白间距。默认值为“2”

cellpadding:设置单元格内容与单元格边框之间的空白间距。默认值为“1”

width:设置表格宽度 height:设置表格的高度

align:设置表格在网页中的水平对齐方式。值为：left,center,right.

(2).表头标签

<th></th>其文本加粗居中

<caption></caption> 表格标题紧随table标签之后

(3).合并单元格

跨行合并：rowspan 跨列合并：colspan

合并顺序：由上至下由左至右

合并单元格的思想：

将多个内容合并，多余删除

公式：删除的个数=合并个数-1

16.HTML表单

表单通常由表单控件，提示信息和表单域三部分构成。

目的：为了收集用户信息

(1).input控件

<input />为单标签，type为最基本属性

type:text单行文本输入框

password密码输入框

radio单选按钮

checkbox复选框

button普通按钮

submit提交按钮

reset 重置按钮

image 图片形式的提交按钮

file 文件域

name:由用户定义

value:由用户自定义

checked:checked定义默认

maxlength:正整数允许输入的最多字符数

注：radio 如果是一组，必须给它们命名相同的命名name.

单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

17.label标签

label标签

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

18.textarea控件（文本域）

textarea控件（文本域）

通过<textarea></textarea>标签创建多行文本输入框

例：

19.下拉菜单

<tr>
<td>年龄</td>
        <td>
             <select  name=""  id="">
                        <option   value="">选择年份</option>
                        <option   value="">1998</option>
                        <option   value="">1999</option>
                        <option   value="">2000</option>
                        <option   value="">2001</option>
               </select>
                <select  name=""  id="">
                        <option   value="">选择月份</option>
                        <option   value=""   selected="selected">1月</option>
                        <option   value="">2月</option>
                        <option   value="">3月</option>
                        <option   value="">4月</option>
               </select>
        </td>
       
</tr>

注： selected="selected"为默认

20.表单域

from标签用于定义表单域，即创建一个表单，实现用户信息的收集

注：method取值为get/post

<form action="www.baidu.com" method="post">
			账号：<input type="text" name="" value="" />
			密码：<input type="password" name="" value="" />
			<input type="submit" value="提交"/>
</form>

21.块元素

div p ul ol dl

22.行内

span a em i b

23.行内块

img input textarea

24.相对路径

相对路径

图像文件和html文件：

同一文件：<img src=”” />

下一级文件：<img src=”img/img01/l.gif” />

上一级文件：../

25.绝对路径

完整网络地址

m0_59090542

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识汇集

一.HTML初识1.Html指超文本标记语言Html不是一种编程语言，而是一种标记语言总结：HTML作用是标记标签来描述网页，把网页内容在浏览器中显示出来2. HTML骨架格式Html有自己的语言语法骨架格式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>我是标签</title> </head&
复制链接

扫一扫