html

最新推荐文章于 2023-07-14 19:00:42 发布
qq_43145601
最新推荐文章于 2023-07-14 19:00:42 发布
阅读量261
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/weixin_46143360/article/details/108938089
版权
前端专栏收录该内容
4 篇文章 0 订阅
订阅专栏
html
> 双标签：
<标签名>内容</标签名>
<body></body>
单标签：
<标签名/>
<br/>
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
标签的公用属性：
class:规定当前元素所引用的样式类名称
id:规定当前元素的网页上唯一标识，一般在css,js中会根据id检索当前的元素
name：当前元素在文档上的
style:规定当前元素的显示样式，取值为css样式表
title：规定当前元素的标题，类型为文本，可在工具提示中显示。

HTML提供了6个等级的标题(从大到小)
标题标签语义：  作为标题使用，并且依据重要性递减
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
段落标签：
单词缩写： paragraph 段落
<p>文本内容</p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
水平线标签：
单词缩写： horizontal 横线
<hr/>是单标签
在网页中显示默认的样式的水平线
换行标签：
单词缩写： break 打断 ,换行
<br/>
div span标签(重点)
div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>
文本格式化标签：
<b></b><strong></strong>  ------文字以粗体的方式显示(XHTEL推荐使用strong)
<i></i><em></em>----------文字以斜体方式显示（XHTEL推荐使用em）
<s></s><del></del>--------文字以加删除线方式显示（XHTML推荐使用del）
<u></u><ins></ins>--------文字以加下划线方式显示（XHTEL推荐使用U）

图像标签img
单词缩写（image图像）
<img src="图像URL">
属性   属性值     描述
src      URL      图像的路径
alt      文本      图像不能显示时的替换文本
title   文本       鼠标悬浮时显示的内容
width    像素      设置图像的宽度
height    像素      设置图像的高度
border    数字      设置图像边框的宽度
锚标签
单词缩写：anchor 锚
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。


锚标签定位：
使用 <a href="#id名">链接文本 </a> <br />创建链接文本。
使用相应的id名标注跳转目标的位置。
<a href="#id名"></a>
<h5 id="id名"></h5>
特殊字符标签：
&nbsp;        
它叫不换行空格
其他几种空格 &ensp; &emsp;
< 字符代码&lt;
> 字符代码&gt;
&和号 字符代码&amp;
©版权  字符代码&copy；（搜狗输入版权可以看到符号）
®注册商标  字符代码&reg;
注释标签
 <!-- 注释语句 -->   ctrl + /  或者 ctrl +shift + /
 
相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src="logo.gif" /。

图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src="img/img01/logo.gif" /。

图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如img src="../logo.gif" /。

绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
 
列表标签：
无序列表
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
 有序列表 ol （了解）
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
//大小字母A,B,C,D等
阿拉伯数字1.2.3等
大写罗马数字 ⅠⅡ Ⅲ Ⅳ等
小写罗马数字 i ii iii iv等
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。 但是实际工作中， 较少用 ol

 

自定义列表（理解）
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
创建表格
<table>
<caption>表格的标题</caption>
  <tr>
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
  </tr>
  <tr>
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
  </tr>
</table>
1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。
表格属性：
属性名border：设置表格的宽度。
属性名cellspacing 设置单元格与单元格边框之间的空白间距
属性名cellpadding 设置单元格内容与单元格边框之间的空白间距
属性名width 设置表格的宽度。
属性名height 设置表格的高度
属性名align  left center right设置表格在网页中水平方式的位置
合并单元格(难点)
跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

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

合并的顺序 先上 先左
表单标签
属性
type有两个值 1text 文本输入框
name定义控件的名称
value 初始化值，打开浏览器，文本框中内容
size  设置控件的长度
maxlength  输入框最大输入字符数。
label标签(理解)
单选框<input type=“radio”>
复选框<input type=“checkbox”>
多行文本域
 <form>
      自我介绍：<br>
      <textarea name="ziwojieshao" rows="5" cols="35">
      </textarea>
       </form>
label 标签为 input 元素定义标注（标签）。

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

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
  <form method="post">	  账号：<input type="text" name="zhanghao" size="10" maxlength="5">	  <br>	  <br>	
  密码：<input type="password" name="mima" size="10">	  <br>	  <br>
	  <input type="submit" value="提交">	
  <input type="reset" value="重置">  
  </form>

textarea控件(文本域)
如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

1、select</select中至少应包含一对option></option。

2、在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

method用于设置表单数据的提交方式，其取值为get或post。

name用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。
<form action="">
    <fieldset>
      <legend>学生档案</legend>
      <label for="userName">姓名:</label>
      <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
      <label for="userPhone">手机号码:</label>
      <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
      <label for="email">邮箱地址:</label>
      <input type="email" required name="email" id="email"><br>
      <label for="collage">所属学院:</label>
      <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
      <datalist id="cList">
        <option value="前端与移动开发学院"></option>
        <option value="java学院"></option>
        <option value="c++学院"></option>
      </datalist><br>
      <label for="score">入学成绩:</label>
      <input type="number" max="100" min="0" value="0" id="score"><br>
     <form action="">
      <fieldset>
          <legend>学生档案思密达</legend>
          <label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
          <label>手机号: <input type="tel" /></label> <br /><br />
          <label>邮箱: <input type="email" /></label> <br /><br />
          <label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/>
          <datalist id="xueyuan">
              <option>java学院</option>
              <option>前端学院</option>
              <option>php学院</option>
              <option>设计学院</option>
          </datalist>
  
          <br /><br />
  
          <label>出生日期:   <input type="date" /></label> <br /><br />
          <label>成绩:  <input type="number" /></label> <br /><br />
          <label>毕业时间:  <input type="date" /></label> <br /><br />
          <input type="submit" />  <input type="reset" />
      </fieldset>
      </form>
      <label for="inTime">入学日期:</label>
      <input type="date" id="inTime" name="inTime"><br>
      <label for="leaveTime">毕业日期:</label>
      <input type="date" id="leaveTime" name="leaveTime"><br>
      <input type="submit">
    </fieldset>
  </form>
————————————————
版权声明：本文为CSDN博主「飘…」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/luo609630199/article/details/80066436
qq_43145601
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html

html双标签：<标签名>内容</标签名>单标签：<标签名/>utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。标签的公用属性：class:规定当前元素所引用的样式类名称id:规定当前元素的网页上唯一标识，一般在css,js中会根据id检索当前的元素name：当前元素在文档上的style:规定当前元素的显示样式，取值为css样式表title：规定当前元素的标题，类型为文本，可在工具提示中显示。HTML提供了6
复制链接

扫一扫
专栏目录