网页设计：HTML标签

Yao_xiiiin.

已于 2024-07-17 11:45:39 修改

阅读量1.1k

点赞数 40

文章标签：服务器运维 html

于 2024-07-17 11:19:23 首次发布

本文链接：https://blog.csdn.net/weixin_71751116/article/details/140465808

版权

一、格式 dreamwave

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title>中文测试。。。。</title>
	</head>
	<body>
		这里是测试body测试内容。。。
	</body>
</html>

<head> 网页相关设置 </head>

例子：

二、标签在body内

<h1></h1>双标签标题，加粗，换行 1~6 --->小
<p></p> 双标签段落，有换行功效
<hr> 单标签 左到右分割符
注释

html手册：w3school 在线教程全球最大的中文 Web 技术教程。https://www.w3school.com.cn/

三、元素的属性

语法：<标签属性1=参数1 属性2=参数2>
1）align left，right，center
2) bgcolor ，body的属性设置网页的背景色
<body bgcolor="0xff1234";>

四、文本元素属性

b 元素 <b>内容</b> 加粗
br 换行<br> 如果是p标签中间有间隔
i元素，字体倾斜<i></i>
del元素删除文字<del></del>
strong 强调一段文字，效果类似 b标签
u元素，下划线<u></u>
small元素，超小字体<small></small>
sub 下标<sub></sub>
sup 上标<sup></sup>
<br>h<sub>2</sub>0
<br>100m<sup>2</sup>
ruby，拼音，<ruby>二姐 <rt>(er) (jie)<rt></ruby>，可能部分浏览器不支持。
mark 元素 <mark> </mark> 文字加黄色背景

网页显示：

五、超链接

5种形式
1.链接外部网站
<a href="http://www.baidu.com">baidu</a>
2.链接本地文件
<a href="1.html">1111</a> //去到本网页
3.图片链接
<a href="1.html"><img src="abc.jpg"></a>
4.电子邮件链接打开电子邮件
<a href="mailto:123@13.com">contract me</a>
5.下载文件链接
<a href="abc.jpg">下载</a>

上面的方法在打开新网页时，老的网页会关闭
target 属性
_self :当前位置打开默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>

六、img单标签

src 图像来源
alt 如果不能正确打开，显示的文字
width, heigh
<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的，高度百分比无效的

七、列表

有序列，无序序列
自定义列表
无序列表前面无数字
<ul>
       <li>列表1</li>
       <li>列表2</li>
       <li>列表3</li>
       <li>列表4</li>
</ul>

有个type属性文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块

有序列，前面有数字
<ol>
       <li>列表1</li>
       <li>列表2</li>
       <li>列表3</li>
       <li>列表4</li>
</ol>
其中可以放文字，图片，或链接
有type属性，设置排序使用什么数字
start 开始值，后面的++；

八、表格

表格的构成，
   table：外框；
   tr：行；
   td：列。
   <table>
       <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
       <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
       <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
       </table>
       3行 3列
表格的属性
border 边框粗细
th，是tr的属性，列标题，自动居中，加粗
colspan，横向合并单元格，需要整型参数
   <tr><th colspan="3">name</th></tr>
表格的合并
rowspan，列项合并，整数参数

九、html实体

用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

在www.w3school.com查询

十、表单

传递参数，数据
<form></form>

//默认不写method，是get方式

input元素，（输入框）他是表单的一个字属性
   指定表单中的内容项，比如输入内容的文本框
   可以指定表单属性，也可以放在表单的外面。
input元素的属性：
       type：指定输入框的类型，text单行文本，password密码，submit提交按钮。
       reset：重置按键，button按键，普通的按键需要和特定的时间关联。
       image：图片式按键
       hidden：隐藏字段，该内容不显示在页面上，提交其他的一些变量。
       email：是一个邮箱类型，新特性，可能支持有差异
       required：表示内容必须填写，不然不能提交。
name：名称，输入内容识别名称，传递参数时候的参数名称
value：默认值，输入框默认填入的内容。
maxlength：指定最大长度
placeholder：设置提示信息的。