Web之HTML笔记

Web之HTML、CSS、JS

  • Web标准
    • 一、HTML（超文本标记语言）
      • HTML 基本结构标签
      • 常用标签
        • 1.font标签
        • 2.p标签
        • 3.注释
        • 4.h系列标题
        • 5.img
        • 6.超链接a
        • 7.列表
        • 8.表格
        • 9.表单

Web之CSS笔记

Web标准

  • 结构标准用于对网页元素进行整理和分类(HTML)
  • 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
  • 行为标准用于对网页模型的定义及交互的编写(JavaScript)

一、HTML（超文本标记语言）

HTML 基本结构标签

标签名含义说明
<html></html>HTML标签页面中的最大的标签，称为跟标签
<head></head>文档的头部注意在head标签中必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档的所有内容，页面内容基本都是放到body里面的

常用标签

1.font标签

部分常用属性（html5不支持该标签，建议使用CSS）：

color属性：修改颜色
face属性：修改字体（类型）
size属性：修改文本大小（1-7）

<font color="red" face="黑体" size="3">font字体标签</font>

font字体标签

2.p标签

全称paragraph，用来表示段落，它是一个行内元素，一个标签独占一行。

<p>......</p>

......

<br>：全称barter rabbet,换行标签，用于插入一个换行符。

3.注释
<!-- 需求： 在网页上显示 font字体标签 ， 并修改字体为 黑体， 颜色为红色。-->
4.h系列标题

<h1>到<h6>：标题标签，用于定义标题的级别，<h1>是最高级别的标题，依次递减。

<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>

标题标签1

标题标签2

标题标签3

标题标签4
标题标签5
标题标签6
5.img

<img>: 图像标签，用于插入图像；通过src属性指定图像的URL，可以是相对路径或绝对路径。

<img src="test.jpg" alt="风景" title="夜景" height="100" />
风景

常用属性

 alt属性：alt属性用于指定图像的替代文本。当图像无法加载时，替代文本会显示在图像的位置。width和height属性：width和height属性用于指定图像的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定。title:提示文本,鼠标放到图片上,就会有提示
6.超链接a

用于从一个页面链接到另一个页面。

<a href="https://bilibili.com">网址直接跳转</a> 
<a href="images/1.webp">相对路径跳转</a>
<a href="hello.exe">如果是打不开的文件，则下载之</a>
<a href="">空链接是刷新</a>
<a href="#">#是回到顶部</a>
<a href="javascript:;">禁止链接跳转</a>

网址直接跳转
相对路径跳转
如果是打不开的文件，则下载之
空链接是刷新
#是回到顶部
禁止链接跳转

常用属性

target:打开方式,默认是_self.如果是_blank则用新的标签页打开

锚点

href里面为#id变为锚点功能，点击跳转到id对应的块。

1.快速定位到页面中的某个位置。

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">第一集剧情 <br>第一集剧情 <br>...
</p>
<p id="two">第二集剧情 <br>第二集剧情 <br>...
</p>
<p id="three">第三集剧情 <br>第三集剧情 <br>...
</p>

第一集
第二集
第三集

第一集剧情
第一集剧情
...

第二集剧情
第二集剧情
...

第三集剧情
第三集剧情
...

2.跳转到不同页面的不同位置

<a href=”demo.html#锚点名称”>demo.html页面 xxx元素位置</a><a href=”demo.html#box”>demo.html页面box元素位置</a>

demo.html页面 xxx元素位置

demo.html页面box元素位置

7.列表

ul ——无序列表

 <ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li><li>无序列表4</li></ul>
  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4

ol ——有序列表

  <ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol>
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
8.表格

一种用于展示结构化数据的标记语言元素。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

caption标签:表格的标题
thead标签:表格的页眉
tbody标签:表格的主体
tfoot标签:表格的页脚
th标签:行/列的标题，文字加粗显示

<table border="1px" bgcolor="green" bordercolor="yellow" width="300px"height="175px"><caption>鲜鱼价目表</caption><thead><!-- 表头部分 --><tr><th>序号</th><th>鱼的种类</th><th>价格</th></tr></thead><tbody> <!--表主体部分--><tr align="center"><td>1</td><td>草鱼</td><td>18.6</td></tr><tr valign="top"><td>2</td><td>鲤鱼</td><td>28.9</td></tr><tr><td>3</td><td>食人鱼</td><td>1000</td></tr></tbody></table>
鲜鱼价目表
序号鱼的种类价格
1草鱼18.6
2鲤鱼28.9
3食人鱼1000

table标签的属性

  • border=“1px” 设置边框
  • bgcolor=“green” 设置背景颜色
  • bordercolor=“yellow” 设置边框颜色
  • width=“300px” 设置表格的宽度
  • height=“175px” 设置表格的高度
  • table表格里的边框是带有间距的 解决方案就是给table标签加: style="border-collapse: collapse;" 去掉边框间的间距
  • align=“center” 设置表格本身的水平对齐方式，注意不是文字居中，而是整张表格在页面居中显示

tr标签的属性

  • align=“” 设置内容的水平对齐方式 left靠左/center居中/right靠右
  • valign=“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下

td标签的属性

  • colspan=“n” 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
  • rowspan=“n” 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)
<!-- table>tr*3>td*4 在数字后按Tab补全--><table border="1px" width="300px" height="200px"><tr><td colspan="2">1-1</td><!-- 被合并的单元格一定得删掉 --><!-- <td>1-2</td> --><td>1-3</td><td>1-4</td></tr><tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><!-- 被合并的单元格一定要删掉！ --><!-- <td>3-2</td> --><td>3-3</td><td>3-4</td></tr></table><hr> <!-- 创建一条水平线 -->
1-11-31-4
2-12-22-32-4
3-13-33-4
9.表单

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

<form>表单标签  <!-- 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等 --><input type="text">表单域 <button type="submit">提交按钮</button >
</form>

input属性

  • type
type值表单类型
text单行文本框
passworld密码文本框
button按钮
reset重置按钮
image图像形式的提交按钮
radio单选按钮
checkbox复选框
hidden隐藏字段
file文件上传
  • name属性：给出当前input表单的名字。
  • value属性：表示该input表单的默认值。
    1）当input type=“text”、“password”、"hidden"时，value中的值会成为其输入框的初始值；
    2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
    3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
    注意：input type="checkbox"和input type="radio"中必须设置
  • value属性；value属性无法与input type="file"一通使用。
  • style属性：为input元素设置简单的CSS样式。
  • width属性：当input type="image"时，通过width属性控制元素的宽度；
  • height属性：当input type="image"时，通过height属性控制元素的高度；
  • maxlength属性：定义input元素中可输入的最长字符数。

select和option创建下拉式表单

<select>      <option value="1" selected="selected">qq.com</option><option value="2">163.com</option><option value="3">tongji.edu.cn</option>
</select>

selected标注默认选中的内容。

textarea标签创立多行文本框

<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>

表单示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><form action="" method=""><label>请输入姓名：</label><input type="text" name="" id=""><br><label>请输入密码：</label><input type="password" name="" id=""><br><label>再次输入密码：</label><input type="password" name="" id=""><br><lebel>性别：</lebel><input type="radio" name="xb" id="" value="1">男<input type="radio" name="xb" id="" value="0">女<br><label>兴趣爱好</label><input type="checkbox" name="" id="" value="1">游泳<input type="checkbox" name="" id="" value="2">看书<input type="checkbox" name="" id="" value="3">爬山<input type="checkbox" name="" id="" value="4">思考<br><label>生日：</label><select><option value="1995">1995</option><option value="1996">1996</option><option value="1997" selected="selected">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option></select>年<select><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">4</option><option value="5">5</option></select>月<select><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">4</option><option value="5">5</option></select>日<br>头像<img src="image/headLogo/13.gif"><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><br><input type="button" value="普通按钮"><input type="submit" value="提交按钮"></form><textarea rows="10" cols="100" name="" id="">请输入</textarea><input type="file"><input type="button" value="上传"><br>000<input type="hidden" name="" id="">000<select size="4" multiple="true"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="4">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option></select><select size="4" multiple="true"></select>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/191663.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql服务器数据同步

mysql服务器数据同步

在Linux和Windows之间实现MySQL服务器数据的同步。下面是一些常见的方法和工具&#xff1a; 复制&#xff08;Replication&#xff09;&#xff1a;MySQL复制是一种常见的数据同步技术&#xff0c;可用于将一个MySQL服务器的数据复制到其他服务器。您可以设置主服务器&#xff…
阅读更多...
Systemverilog中Clocking blocks

Systemverilog中Clocking blocks

1. clocking block的作用 Clocking block可以将timing和synchronization detail从testbench的structural、functional和procedural elements中分离出来&#xff0c;因此sample timming和clocking block信号的驱动会隐含相对于clocking block的clock了&#xff0c;这就使得对一些…
阅读更多...
【LeetCode刷题-滑动窗口】--345.反转字符串中的元音字母

【LeetCode刷题-滑动窗口】--345.反转字符串中的元音字母

345.反转字符串中的元音字母 class Solution {public String reverseVowels(String s) {int len s.length();if(len < 2){return s;}char[] charArray s.toCharArray();int left 0,right len - 1;while(true){while(left < len && checkVowels(charArray[lef…
阅读更多...
智能配电系统解决方案

智能配电系统解决方案

智能配电系统解决方案是一种集成了先进技术和智能化功能的配电系统&#xff0c;它能够提高电力系统的效率、可靠性和安全性。力安科技智能配电系统解决方案依托电易云-智慧电力物联网&#xff0c;具体实施的方案如下&#xff1a; 智能化设备和传感器&#xff1a;采用智能化的开…
阅读更多...
【开源】基于Vue.js的音乐偏好度推荐系统的设计和实现

【开源】基于Vue.js的音乐偏好度推荐系统的设计和实现

项目编号&#xff1a; S 012 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S012&#xff0c;文末获取源码。} 项目编号&#xff1a;S012&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 音乐档案模块2.1…
阅读更多...
[Kettle] 字段处理

[Kettle] 字段处理

1.增加常量 常量是指在计算机程序运行过程中其值不能改变的量 常量可以是任何的数据类型&#xff0c;例如&#xff0c;圆周率"3.141159"、中国首都"北京"等都可以是常量 增加常量是指在数据中增加一个字段&#xff0c;并给字段设置一个固定的值 数据源…
阅读更多...
手搓哈希表、列表、队列，只为了用C语言快速求解华容道游戏，我不是大佬，只是一个游戏算法爱好者

手搓哈希表、列表、队列，只为了用C语言快速求解华容道游戏，我不是大佬，只是一个游戏算法爱好者

背景 多年前曾经写过C语言求解华容道&#xff0c;当时没有用到哈希表&#xff0c;导致整个查重搜索数组过大&#xff0c;每次求解都得花上数分钟的时间&#xff0c;如今时过境迁&#xff0c;对数据结构和算法有了更深的理解&#xff0c;所以得把这一块补上了。(其实就是最近想…
阅读更多...
（论文阅读46-50）图像描述2

（论文阅读46-50）图像描述2

46.文献阅读笔记 简介 题目 Learning a Recurrent Visual Representation for Image Caption Generation 作者 Xinlei Chen, C. Lawrence Zitnick, arXiv:1411.5654. 原文链接 http://www.cs.cmu.edu/~xinleic/papers/cvpr15_rnn.pdf 关键词 2014年rnn图像特征和文本特…
阅读更多...
elasticsearch 概述

elasticsearch 概述

初识elasticsearch 了解ES elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在GitHub搜索代码 在电商网站搜索商品 ELK技术栈 elasticsearc…
阅读更多...
【算法训练营】参数解析+跳石板

【算法训练营】参数解析+跳石板

&#x1f308;欢迎来到Python专栏 &#x1f64b;&#x1f3fe;‍♀️作者介绍&#xff1a;前PLA队员 目前是一名普通本科大三的软件工程专业学生 &#x1f30f;IP坐标&#xff1a;湖北武汉 &#x1f349; 目前技术栈&#xff1a;C/C、Linux系统编程、计算机网络、数据结构、Mys…
阅读更多...
SpringSecurity6 | 自动配置(下)

SpringSecurity6 | 自动配置(下)

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…
阅读更多...
【代码随想录】算法训练计划23

【代码随想录】算法训练计划23

1、669. 修剪二叉搜索树 题目&#xff1a; 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元素的相对结构 (即&#xff0c;如果没有被移除&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023