HTML基础笔记

最新推荐文章于 2024-07-17 18:42:40 发布

妖蒲

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量92

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_51135343/article/details/115003623

版权

HTML基础笔记认识HTMLHTML(Hyper Text Markup Language):超文本标记语言。超文本：可以加入图片、声音、动画、多媒体等内容（超越文本限制），从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。HTML骨架格式：<html>  <head>

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

HTML基础笔记

认识HTML

HTML(Hyper Text Markup Language):超文本标记语言。
超文本：可以加入图片、声音、动画、多媒体等内容（超越文本限制），从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
HTML骨架格式：

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    
    <body>
    <!-- 文档的主体 -->
    </body>
</html>

常规元素(双标签)

<标签名> 内容 </标签名>   比如<body>我是文字</body>

空元素(单标签)

<标签名 />  比如 <br />或<br>

嵌套关系父子级包含关系<html>和<head>

并列关系兄弟级并列关系<head>和<body>

<html>
    <head>
        <title>标题</tltle>
    </head>
    
    <body>
    
    </body>
</html>

字符集(Character set):是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字
UTF-8是目前最常用的字符集编码方式
让 html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容

  <meta charset="UTF-8" />

HTML标签

排版标签：主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
标题标签 h(h1~h6)<h1></h1>
段落标签 p,可以把 HTML 文档分割为若干段落<p></p>
水平线标签 hr <hr/>
换行标签 br <br/>
div 和 span 标签:是没有语义的,是我们网页布局最主要的2个盒子。<div></div><span></span>
b和strong 文字以粗体显示
i和em 文字以斜体显示
s和del 文字以加删除线显示
u和ins 文字以加下划线显示
标签属性：
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

图像标签img

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self"  默认窗口弹出方式
target="_blank" 新窗口弹出

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
href	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

锚点定位：通过创建锚点链接，用户能够快速定位到目标内容

 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>

使用<a href="#id名">链接文本</a>创建链接文本（被点击的） 
<a href="#two">

表格

表格不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。
创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table、tr、td，他们是创建表格的基本标签，缺一不可

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据，即数据单元格的内容，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。

表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签替代相应的单元格标签<td></td>即可。
表格标题caption通常这个标题会被居中且显示于表格之上。caption标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。

<table>
   <caption>我是表格标题</caption>
</table>

表格属性

属性名	含义	常用属性值
border	设置表格的边框(默认为0无边框)	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2px）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1px）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

合并单元格：合并的顺序我们按照先上后下先左后右的顺序 ,合并完之后需要删除多余的单元格。
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

列表

列表ul

无序列表 ul
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。

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

有序列表 ol
<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
常用的type属性值分别为是1，a，A，i，I
<ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
<ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。

<ol type="A"> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

自定义列表 dl
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
input控件：input 输入的意思
<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性
在这里插入图片描述

用户名: <input type="text" /> 
密  码：<input type="password" />

value属性：value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

用户名:<input type="text"  name="username" value="请输入用户名">

name属性：name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。

<input type="radio" name="boy"  />男

checked属性：表示默认选中状态。较常见于单选按钮和复选按钮

<input type="radio" name="boy" value="男" checked="checked" />男

label标签：label 标签为 input 元素定义标注（标签）。
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

 <label> 用户名： 
    <input type="radio" name="usename" value="请输入用户名">   
  </label>

textarea控件(文本域)：通过textarea控件可以轻松地创建多行文本输入框【cols=“每行中的字符数” rows=“显示的行数”】

  <textarea >
    文本内容
  </textarea>

select下拉列表：如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
在option 中定义selected =" selected "时，当前项即为默认选中项。

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

**form表单域：**在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

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

每个表单都应该有自己表单域。后面学 ajax 后台交互的时候，必须需要form表单域。

妖蒲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础笔记

HTML基础笔记认识HTMLHTML(Hyper Text Markup Language):超文本标记语言。超文本：可以加入图片、声音、动画、多媒体等内容（超越文本限制），从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。HTML骨架格式：<html>  <head> 
复制链接

扫一扫