HTML速成笔记

cainiaolaoliu

于 2023-01-07 15:09:11 发布

阅读量158

点赞数

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.csdn.net/fangshyv/article/details/128589941

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

什么是HTML？

是一门语言，可以用来写网页
是一个超文本标记语言。超文本是说不止是文字信息，还可以有图片视频，标记语言是说由标签构成的语言，就像xml。
html是运行在浏览器上的，会被浏览器解析
标签都是预定义号的，例如：会展示图片，我们学习html，就是学习语法和标
w3c标准：网页由三部分组成——结构：html，表现：css，行为：JavaScript

HTML快速入门

需求：写一个html文件，用浏览器打开后展示一句话。

流程：

新建文本文件，后缀改成html
编写html结构标签
在 < bidy> 中定义文字

<html>
	<head>
	<title>html 快速入门</title>
	</head>
	
	<body>
	乾坤未定，你我皆是黑马
	</body>
</html>

修改文字颜色

	<body>
	<font color="red">乾坤未定，你我皆是黑马</font>
	</body>

这里注意，html不区分大小写
语法也比较松散，写错了也会识别出来，比如< /font>丢了，或者red没加引号，都能显示。

基础标签

< h1> - < h6>代表标题大小，h1最大
< font>字体、尺寸、颜色
< b>粗替，< i>斜体，< u>下划线
< center>文本居中
< p>定义段落
< br>定义换行（加一个在末尾即可）
< hr> 定义水平线，< hr color = “red”>控制水平线样式
转义字符：

图片、音频、视频标签

img标签定义图片
- src定义图像的url（统一资源定位符）
- height，定义图像的高度，可以写百分比，也可以写像素值。
- width，定义图像的宽度
audio标签定义音频，支持MP3，WAV，OGG。
- src定义音频的url（统一资源定位符）
- controls显示播放控件（就是播放按钮）
video标签定义视频。支持的音频格式MP4、WebM、OGG
- src定义视频的url（统一资源定位符）
- controls：显示模仿控件（这个也有款和高）

scr可以写绝对路径，也可以相对路径（./xxx，,/就是当前目录）（ . ./是上一级的意思）。

超链接标签与列表标签

超链接

< a>
有两个属性：

href：指定资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页打开

<h2>
  <a href="https://www.baidu.com/" target="_self">我是标题</a>
</h2>

列表标签

有序列表：ol，
无序列表：ul
定义中间的列表项：li
可以加type属性，设置符号，但是我们一般不要前面的符号。

<ol>
  <li>咖啡</li>
  <li>奶茶</li>
</ol>

表格标签

table定义表格
tr定义行
td定义单元格
th定义表头单元格

也就是，先一个table，然后第一个tr是表头，中间包裹的是th。后边的都是记录，所以包裹的是td

<table>
  <tr>
    <th>hh</th>
    <th>hs</th>
  </tr>
  <tr>
    <td>ss</td>
    <td>sd</td>
  </tr>
</table>

下面进行几个优化，
首先加边框，合并边框，在table里加。
然后居中显示，是tr的属性
然后合并单元格，有竖着合并和横着合并，这里注意，使用方法是，第一条记录里设置跨的单元格个数，然后第二条记录就相当于少了一个单元格，也就是说竖着合并的时候，那个共有的单元格时算上边那条记录里的。
在这里插入图片描述

代码如下

<table border="1" cellspacing="0">	
  <tr align="center">
    <th colspan="2">hh</th>

  </tr>
  <tr align="center">
    <td rowspan="2">ss</td>
    <td>sd</td>
  </tr>
  <tr align="center">
    <td>ss</td>
  </tr>
</table>

布局标签

在这里插入图片描述

表单标签

用于数据的采集功能，也就是那些要填的框框

form：定义表单
- action：规定提交表单向何处发送表单数据（指定URL）
- method：规定用于发送表单数据的方式
  - get：浏览器会讲数据直接附在表单的action URL之后，大小有限制，4kb
  - post：浏览器会将数据放到http请求消息体中。大小无限制。
表单项标签

表单项标签还有个属性name。他会把获取到的信息和name的值组成键值对传递。
细节：
标签里有属性：name，id。
可以用lable来扩大框的范围，点名字也能选中框。
对于单选框，很多需要互斥，这时候，把两个input的name设置成一样的就可以互斥了，并且，要在后边加个value = “1”和2，这样就提交的是1和2.不然会提交相同的“on”。

   性别： <input type="radio" name = "sex" value="1">男
    <input type="radio" name = "sex" value="2">女

文字直接写就行，因为在body包裹里
提交等按钮，可以value重命名

 <input type="submit" value="免费注册"><br>

下拉列表：

<select name="city">
       <option value="1">北京</option>
       <option value="2">上海</option>
       <option value="3">广州</option>
   </select>

文本域texrarea

cainiaolaoliu

关注

0
点赞
踩
1

收藏

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

什么是HTML？是一门语言，可以用来写网页是一个超文本标记语言。超文本是说不止是文字信息，还可以有图片视频，标记语言是说由标签构成的语言，就像xml。html是运行在浏览器上的，会被浏览器解析标签都是预定义号的，例如：会展示图片，我们学习html，就是学习语法和标w3c标准：网页由三部分组成——结构：html，表现：css，行为：JavaScript。
复制链接

扫一扫