html小结

最新推荐文章于 2022-07-24 15:43:57 发布

coder chen

最新推荐文章于 2022-07-24 15:43:57 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/weixin_44226752/article/details/112794295

版权

HTML小结

1.什么是HTML

HTML是HyperText Markup Language（超文本标记语言）的缩写，是开发网页的最基础的语言。超文本是指用超链接的方式将不同空间的文字信息组织在一起的网状文本，标记语言是指它是由标签构成的语言，标记语言不是编程语言。HTML运行在浏览器上，由浏览器进行解析。
HTML的主要作用是搭建基础网页，展示页面内容

2. HTML的快速入门

2.1 基本语法

<!DOCTYPE html>//告诉浏览器下面的代码是HTML5类型的，使浏览器可以正确解析并显示
<html>//HTML页面的根标签，所有的HTML代码都要写在根标签里面
	<head>//头元素，里面指定文档的一些属性，引入外部资源，如css，js的引入（页面不可见）
		<meta charset="utf-8">//对于中文页面防止出现乱码，也可设置为GBK
		<title>coderchen</title>//文档标题
	</head>
	<body>//body里的标签可以显示在浏览器上
    	<h1>我的第一个标题</h1>
    	<p>我的第一个段落。</p>
	</body>
</html>

HTML文档的后缀可以是.html或者.htm
HTML标签有两种，一种是围堵标签，如<html><html/> 。一种是自闭和标签，如<br/>
HTML标签不区分大小写，建议小写。

2.2 标签说明

<head>中的标签

 <meta>，<title>，<base> ,<link>, <style> ....

<body>中的标签

<h1> to <h6>，<p>，<br> , <hr> ,<b> ,<i> ,<img> <from> ,<div>

3. head中的标签

3.1 `<title>`

定义了不同文档的标题，是必须存在的。虽然它在HTML页面不可见，但它也是有必要的，例如我们将一个网页收藏时，显示在收藏夹的标题就是Title中定义的内容，同时title也可以显示Logo图片，只要将link标签放入head中就可以。

在这里插入图片描述

还有一个作用是显示在搜索引擎结果页面的标题。

3.2 `<base>`

<base href="xxx" target="_blank">
<base>标签定义了当前文档基本的链接地址和链接响应方式，可以作为当前文档的默认定义。在文档b元素中定义href和target时可以写相对路径或者不写.

3.3`<link>`

<link rel="stylesheet" type="text/css" href="xxx.css">
link标签定义了文档与外部资源的关系。href定义了被链接文档的位置。rel表示当前文档与被链接文档之间的关系，stylesheet表示样式表。type表示被链接文档的MIME类型。

3.4 `<style>`

<style type="text/css">...</style>
style定义了HTML文档的样式信息，它对元素进行样式的指定。

3.5`<meta>`

meta标签提供了HTML文档的元数据，它用于指定网页的描述，关键词，文件的作者，文档的字符编码等。
通常会在head内定义<meta charset="utf-8">来指定浏览器编码方式，防止出现中文导致的乱码

3.6 `<script>`

<script >...</script>
用于定义js脚本,如果使用了src属性，则表示引入了外部的js脚本，script中元素必须是空的。没有使用src属性则可以在script中定义脚本。（在JavaScript中会详细解释）

4. body中的标签

4.1 文本标签

<h1>-<h6> : 标题标签
<p> :段落标签
<br/> ：换行标签
<hr/>：展示一条水平线
<b>：字体加粗
<i>：字体斜体
：注释

4.2 图片标签

<img src="图片路径", width="xxx",height="xxx" alt="xxx" >:展示图片

图片的路径是相对路径。./代表当前目录，../代表上一级目录

alt:无法显示图片时可以显示替换文本alt中的内容

4.3 链接标签

<a href="访问资源的路径" target="_self">链接文本</a>：超链接

href: 可以是本地或者网络中的,访问本地的资源使用相对路径，访问网络资源使用url(统一资源定位符)

链接文本不一定是文本，也可以是图片或者其他HTML元素

target:打开资源的方式，_self(默认值，当前页面打开)或者_blank（新的空白页面打开）

4.4 表格标签

表格代码

 <body>
  <table border="1" align="center" cellspacing="0">
      <tr>
          <th>列名1</th>
          <th>列名2</th>
      </tr>
      <tr>
          <td>列值1</td>
          <td>列值2</td>
      </tr>
      <tr>
          <td>列值1</td>
          <td>列值2</td>
      </tr>
   </table>
 
 </body>

在浏览器中的显示

<table>:定义表格，对表格定义的代码均在table里

table中的属性：border（表格单元的边框），cellspacing（表格边框间距），align（表格的对齐方式，居中或者左右）
<th>:表格的表头

colspan,rowspan指定一个单元格占几行几列
<tr>:表格的行
<td>:表格单元

4.5 列表标签

无序列表

<body>
	<ul>
  		<li>Coffee</li>
  		<li>Tea</li>
 	 	<li>Milk</li>
	</ul>
<body/>

有序列表

<body>
	<ol>
  		<li>Coffee</li>
  		<li>Tea</li>
  		<li>Milk</li>
	</ol>
<body/>

结果

4.6 块级标签`<div>`

<div> 标签主要作用是文档布局，相当于一个装载其他HTML元素的容器，经常和css一起使用，来取代用表格<table>定义布局的老方式。<table>的作用是显示表格化数据。

4.7 表单标签（重要）

表单用form定义，对表单的描述均在<form>中。它用来采集用户的信息，并把这些信息传递给服务器。
from的属性： <form name="xxx" action="xxx" method="xxx" target="xxx"> ...</from>

name: 表单的名字（要想表单中的数据被提交，必须指定名字）

action:表单要向何处发送表单数据（可以是本地或者网络上的），本地相对地址，网络url

method:表单提交的方式，有get,post

from里的标签：

<input>

<from>//文本框
	name:<input type="text" name="name" placeholder="请输入name">
</from>

text:文本输入框 placeholder：指定输入框的提示信息

<from>//密码框
	password:<input type="password" name="password" placeholder="请输入password">
</from>

password:密码输入框

<from>//单选框
	<input type="radio" name="sex" value="male" checked="checked">male<br>
    <input type="radio" name="sex" value="female">female
</from>

radio:单选框

要想让多个单选框实现单选效果，则多个单选框的name属性值必须相等

value里的值表示其被选中后向服务器提交的值

可以使用checked属性来指定默认值

<from>//复选框
	<input type="checkbox" name="vehicle" value="car" checked="checked"> 乘坐汽车<br>
    <input type="checkbox" name="vehicle" value="bike">骑自行车
</from>

checkbox:复选框

value里的值表示其被选中后向服务器提交的值

要想让多个复选框实现复选效果，则多个复选框的name属性值必须相等

可以使用checked属性来指定默认值

<from>//文件选择框
	<input type="file">
</from>

<from>//提交框
    <input type="submit" value="submit">	
</from>

submit:提交框，提交表单

<from>
	<input type="reset" value="reset">
</from>

reset:重置框将表单中填写的内容重新设置为默认值

<testarea>
```
<from>//文本域  
	<textarea rows="10" clos="30">
</from>
```
rows:指定10行

clos: 指定30列（每一行有20个字符）

coder chen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html小结

HTML小结1.什么是HTMLHTML是HyperText Markup Language（超文本标记语言）的缩写，是开发网页的最基础的语言。超文本是指用超链接的方式将不同空间的文字信息组织在一起的网状文本，标记语言是指它是由标签构成的语言，标记语言不是编程语言。HTML运行在浏览器上，由浏览器进行解析。HTML的主要作用是搭建基础网页，展示页面内容2. HTML的快速入门2.1 基本语法<!DOCTYPE html>//告诉浏览器下面的代码是HTML5类型的，使浏览器可
复制链接

扫一扫