邵静的HTML入门

最新推荐文章于 2024-11-06 16:04:23 发布

新生代农民工001

最新推荐文章于 2024-11-06 16:04:23 发布

阅读量360

点赞数

文章标签： html 编辑器

本文链接：https://blog.csdn.net/qq_41948472/article/details/121497249

版权

本文详细介绍了HTML的基本结构和常用标签，包括标题标签h1-h6、段落p、无序列表ul、有序列表ol、div、表格table、form表单、行内标签a、br、i、input、textarea、span、select、img等，以及它们的属性和使用方法。通过实例展示了这些标签在网页布局和交互中的作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html> 声明为 HTML 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

块级标签有：

h1~h6：标题（h1-h6 是从大到小）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果如下:

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

p：段落

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

效果如下:

段落标签...

段落标签...,

无序列表标签 (如果遇到多个差不多相同的东西,可以用)

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

效果如下:

列表项1
列表项2
列表项3

有序列表标签 (不常用)

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

效果如下, 就是会按照1、2、3…或者其它递进方式排列

列表项1
列表项2
列表项3

div：块标签 (没有具体意思,用来包裹其他标签)

  <div>
    <p>段落标签...,</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div>

效果如下:

段落标签…,

列表项1
列表项2
列表项3

table表格标签

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

效果如下:

Month	Savings
January	$100

form 标签用于为用户输入创建 HTML 表单。

<form action="form_action.asp" method="get">
 <p>First name: <input type="text" name="fname" /></p>
 <p>Last name: <input type="text" name="lname" /></p>
 <input type="submit" value="Submit" />
</form>

行内标签有：(在一行显示不会换行叫行内标签)

a标签可定义锚(多用于页面跳转)

href : 规定链接指向的页面的 URL
target: 跳转方式 _blank , _parent, _self, _top

target=_blank 在一个新窗口打开
target=_self 当前窗口打开（默认）

<a href="http://www.w3school.com.cn">普通跳转</a>
<a href="http://www.w3school.com.cn"  target="_blank">_blank 跳转</a>
<a href="http://www.w3school.com.cn"  target="_self">_self 跳转方式</a>

效果如下:
普通跳转
 _blank 跳转
 _self 跳转方式

br: 换行

 <p>
   第一行段落标签...,
   <br/>
   第二行段落标签...,
</p>

效果如下:

第一行段落标签...,
第二行段落标签....

i: 斜体文本效果 (可用于展示图标,后面会学到)

  <i>斜体文本效</i>

效果如下:
斜体文本效

input: 输入框

常用属性 , 其他属性可以了解

type: button, checkbox, hidden,password,radio,submit,text
disabled 禁用此元素。
maxlength: 规定输入字段中的字符的长度。
placeholder: text 规定帮助用户填写输入字段的提示.
value: value 规定 input 元素的值
readonly: 规定文本区为只读(不可输入)。

<input type="submit" value="Submit"/>
<input type="submit" value="Submit" />
<input type="checkbox" /> 多选框
<br/>
<input type="button" value="按钮"/>
<input type="radio" />单选框
<br/>
<input type="password" value="123"/>
<input type="text" placeholder="请输入文本"'/>
<input type="text" disabled	/>

效果如下:
复制代码,来这里亲自试一试input效果

textarea: 多行的文本输入控件(简称:文本域)

常用属性

autofocus: 规定在页面加载后文本区域自动获得焦点。
cols: 规定文本区内的宽度。(数字越大越宽)
rows规定文本区内的行数(数字越大越高)。
disabled 禁用该文本区。
maxlength: 规定文本区域的最大字符数。
name 规定文本区的名称(起名字)。
placeholder text 规定描述文本区域预期值的简短提示。
readonly: 规定文本区为只读(不可输入)。> 1. 规定当在表单中提交时，文本区域中的文本如何换行。。

 <textarea rows="3" cols="20"> 在w3school，你可以找到你所需要的所有的网站建设教程。 </textarea>
 <textarea rows="3" cols="20" placeholder="请输入文本"> </textarea>
 <textarea rows="3" cols="20" readonly> </textarea>
 <textarea rows="3" cols="20" disabled	> </textarea>
  <textarea rows="3" cols="20" autofocus> </textarea>
  <textarea rows="3" cols="20" name ="shaojin"> </textarea>

效果如下:
复制代码,来这里亲自试一试textarea效果

span: 组合文档中的行内元素(span的用途: 想单独设置某些字的样式)

  <p>我是个<span >厉害</span>的人</p>

效果如下:

我是个厉害的人

select: 创建单选或多选菜单

multiple: 设置多选
value: 给这条option 起的名字

<p>你喜欢吃什么</p>
<select>
   <option value="苹果">苹果</option>
   <option value="香蕉">香蕉</option>
</select>

效果如下:
复制代码,来这里亲自试一试select效果

img: 图像

常用属性

height: 设置图片宽
width: 设置图片高

  <img src="https://profile.csdnimg.cn/F/3/F/3_qq_41948472"  alt="花" />
  <img src="https://profile.csdnimg.cn/F/3/F/3_qq_41948472"  width="100" heigth="200" alt="花" />
   <img src="w"  alt="花" /> // src里不正确时显示alt里的值

效果如下: