暑假自学html笔记

m0_75048134

已于 2024-07-08 18:15:31 修改

阅读量238

点赞数 6

文章标签： html 笔记前端

于 2024-07-06 19:04:44 首次发布

本文链接：https://blog.csdn.net/m0_75048134/article/details/140233413

版权

以下关于暑假每日html学习进度更新

24.7.6

前端包括html+css+JavaScript

主要结构

<html>

  <head>
      <title> </title>
  </head>

  <body>
   
  </body>

</html>

<!DOCTYPE html>//声明主要用是html5文档

<html lang="zh-CN">//中文网站也可以是en等

标题标签

<h1></h1>,一共有1~6级：

数字越大，有标签字体就会变粗，字体越细，字号越小，由重变轻（重要性）

段落和换行标签

<p></p>

<br />

文本格式化标签（斜体、粗体、下划线等）

语义	标签
加粗	<strong></strong>或<b></b>
倾斜	<em></em>或<i></i>
删除线	<del></del>或<s></s>
下划线	<ins></ins>或<u></u>

<div>和<span>标签

没语义，是盒子，用来装内容

<div>独占一行（大盒子）

<span>一行可以放很多（小盒子）

图像标签和路径

<img src=" 文件路径或文件名" />（还可以里边同时加入其他的alt、title等）

src是<img>标签的必须属性，用于指定图像文件的路径和文件名

src可以替换为其他的：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示时显示文字
title	文本	提示文本。鼠标放在图像上显示文字
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框粗细

height或者width尽量只修改一个，让图像等比例缩放

24.7.7

相对路径（较重要）

同一级路径		图像文件位于html文件同一级，如<img src="baidu.gif"/>
下一级路径	/	图像文件位于html文件下一级，如<img src="images/baidu.gif"/>
上一级路径	../	图像文件位于html文件上一级，如<img src="../baidu.gif"/>

绝对路径（个人电脑内部以及网站图片地址）

超链接标签

格式

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

target

链接打开方式，_self为默认值，_blank为在新窗口打开

链接分类

1.外部链接

2.内部链接（网站间内部相互链接）

3.空链接（还没做好）

4.下载链接（地址链接是文件.exe或zip等压缩包形式）

5.网页元素链接（点击图片即可跳转

6.锚点链接（点击链接快速跳转到页面某个位置）

第一步：<a href="#xx">xxx</a>

第二步：<h3 id="xx">xxx</h3>

以上就可以从xxx的位置跳转到介绍xxx文本的地方（xx随便取名字）

注释

或ctrl+/即可添加注释

特殊字符

特殊字符	描述	字符代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；

表格标签

1.格式

<table>
  <tr>

    <td>单元格内文字</td>

         ...
  </tr>
      
         ...

</table>

<table></table>用于定义表格的大框

<tr></tr>用于定义表格的行

<td></td>用于定义表格的单元格

<th></th>表头单元格（会加粗居中）

2.表格属性要写在table里

属性名	属性值	描述
align	left、center、right	页面对齐方式
border	1或""	是否有边框，默认为""，表示没边框
cellpadding	像素值	内容与单元边缘的空白，默认1
cellspacing	像素值	单元格之间空白，默认2
width	像素值或百分比	表格宽度

eg：<table align="center">

3.表格结构标签

<thead></thead>表格头部标签

<tbody></tbody>表格主体标签

4.合并单元格

合并一列上的	rowspan
合并一行上的	colspan

步骤

1.先确定跨行还是跨列

2.先找到目标单元格（跨行找最上，跨列找最左），写上合并方式=合并单元格数量。比如：<td colspan="2"></td>

3.删除多余单元格

列表标签

1.无序列表

<ul>

  <li>xx</li>
  <li>xx</li>
  <li>
      <p>xx</p>
  </li>
</ul>

2.有序列表

<ol>

  <li>xx</li>
  <li>xx</li>
  <li>
      <p>xx</p>
  </li>
</ol>

3.自定义列表

<dl>

  <dt>xx</dt>
  <dd>xx</dd>
  <dd>
     <p>xx</p>
  </dd>
</dl>

<dl></dl>用于定义描述列表

<dt></dt>定义项目/名字

<dd></dd>描述项目/名字

表单标签（表单域、表单控件、提示信息）

表单域是一个包含表单元素的区域

<form></form>用于定义表单域

格式：

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

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单名称，以区分同一个页面中多个表单域

24.7.8

表单元素

1.input输入表单元素

<input>标签

<input type="text"/>

value输入后为显示值

name命名后单选按钮只能多选一

<label>标签

<label for="xx">xxx</label>
<input type="radio" name=" " id="xx"/>
<!--id名字需一致-->

2.select下拉元素标签

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option selected="selected">选项3</option>
<!--selected代表默认选项-->
</select>

3.textarea

<textarea rows="5" cols="50">
<!--限制五行，一行50个字符-->
默认显示的内容
</textarea>

推荐学习网站w3shool

html已经更完

m0_75048134

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
暑假自学html笔记

一个普通学生暑假自学日记
复制链接

扫一扫