首页 > 其他分享 >HTML+CSS随笔

HTML+CSS随笔

时间:2023-10-06 22:24:26浏览次数:48  
标签:标签 元素 cell HTML 随笔 选择器 CSS row

这是我的学习笔记,重点是我容易忘的内容,并不全面
配合以下内容学习就很全面了
黑马程序员pink老师前端入门教程

HTML

HTML文件基础结构解析

<!DOCTYPE html>
<html lang="zh-han">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE>声明位于文档中的最前面位置,处于<html>标签之前,但它本身不是一个HTML标签,他就是文档类型声明标签。
例:<!DOCTYPE html>这句代码意思就是采用的HTML5来显示网页


lang用来定义当前文档显示的语言,en定义网页语言为英语,zh-CN定义网页语言为中文。


<meta>元数据(metadata)是关于数据的信息。标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。


Character set(字符集),可通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码。
charset常用的值由:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用的字符。字符集一定要设置,否则可能会引起乱码。一般情况下,建议使用UTF-8编码,尽量写成UTF-8,不要写成utf8UTF8

namecontent,一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。简单来说,name值是内容类型,content是具体的值。例:

下面的 meta 元素定义页面的描述:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词:

<meta name="keywords" content="HTML, CSS, XML" />

下面的meta元素针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)
height:和 width 相对应,指定高度
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例
user-scalable:用户是否可以手动缩放

特殊字符

特殊字符

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
实例:

<table>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

img

在此基础上,<th>则可以表示表头,<thead>表示表格头部,<tbody>表示表格主题,以上3个标签其实显示效果没有明显差别,有助于结构划分。

  • <table>标签

常用属性:

align:表格的对其当方式,参数:left、center、right。

border:表格是否有边框,参数:1(有)或 0(没有)。

cellpadding:单元格内容与单元格边框之间的距离,单位为像素。

cellspacing:单元格之间的距离,单位为像素。

width:单元格宽度,单位为像素。

height单元格高度,单位为像素。

  • 单元格合并

跨行合并:rowspan="合并单元格的个数";要合并的单元格中,最上侧单元格为目标单元格,写合并代码。

跨列合并:colspan="合并单元格的个数";要合并的单元格中,最左侧单元格为目标单元格,写合并代码。
img

合并步骤:先确定是跨行合并还是跨列合并-->找到目标单元格,写上合并方式=合并的单元格数量-->删除多余的单元格

<table border="1" cellspacing="0" align="center" width="500" height="249">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 3</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
    </tr>
</table>

img

<table border="1" cellspacing="0" align="center" width="500" height="249">
    <tr>
        <td>row 1, cell 1</td>
        <td colspan="2">row 1, cell 2</td>
        <td>row 1, cell 3</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
    </tr>
</table>

img

<table border="1" cellspacing="0" align="center" width="500" height="249">
    <tr>
        <td>row 1, cell 1</td>
        <td colspan="2">row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
    </tr>
    <tr>
        <td>row 3, cell 1</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
    </tr>
</table>

img

列表

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

img

  • 有序列表
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

img

  • 自定义列表
    在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与 <dt>(定义项目/名字)和dd(描述每一个项目/名字)一起使用。
<dl>
    <dt>列表项1</dt>
    <dd>列表项2</dd>
    <dd>列表项3</dd>
</dl>

img

表单

在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。
img

表单控件中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

主要类型:

  1、input输入表单元素
img

img

<form   action="http://localhost" method="post" name="name1">
<!--    text 文本框 用户可以在里面输入任何文字-->
<!--    maxlength 规定输入的最大字符数-->
    用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!--    name 是表单元素名称 单选按钮和复选复选框各自不同项此属性必须保持一致-->
<!--    value 是input元素的值-->
<!--    name和value 是提供给后台服务器的,主要给后台开发人员看-->
<!--    password 密码框 用户看不见具体输入的值-->
    密码:<input type="password" name="password"><br>
<!--    radio 单选 按钮可以实现多选一-->
<!--    单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮-->
   性别:男<input type="radio" name="sex" value="man" checked="checked"> 女<input type="radio" name="sex" value="woman"><br>
<!--    checkbox 复选框 可以实现多选-->
   爱好:吃饭<input type="checkbox" name="hobby" value="eating" checked="checked">睡觉<input   checked="checked" type="checkbox" name="hobby" value="sleping">看电影<input type="checkbox" name="hobby" value="watching movie"><br>
<!--    点击了提交按钮,可以把表单域form里面的表单元素里面的值 提交给后台服务器-->
    <input type="submit" value="提交">
<!--    重置按钮可以还原表单元素初始的默认状态-->
    <input type="reset" value="重新填写">
<!--    普通按钮button 后期搭配js脚本使用-->
    <input type="submit" value="获取短信验证码"><br>
<!--    文件域 使用场景:上传文件使用的-->
    上传头像:<input type="file">
</form>

img

label标签

<label>标签为input元素定义标注(标签)。

<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者对应的表单元素上,用来增加用户体验。
语法

性别:
    <label for="nan">男</label>
    <input type="radio" name="sex" value="man" id="nan" checked="checked">
    <label for="nv">女</label>
    <input type="radio" name="sex" value="woman" id="nv"><br>

<label>标签的for属性应当与相关元素的id属性值相同

  2、select下拉表单元素

<form   action="http://localhost" method="post" name="name1">
<!--<select>中至少包含一对<option>-->
<!--在<option>中定义selected = “selected”时,当前项即为默认选中项    -->
    籍贯:
    <select>
        <option>山东</option>
        <option>河南</option>
        <option>河北</option>
        <option>天津</option>
        <option>北京</option>
        <option>云南</option>
        <option selected="selected">深圳</option>
        <option>香港</option>
        <option>黑龙江</option>
    </select>
</form>

img

  3、textarea文本域元素

在表单元素中,<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
语法:

<form   action="http://localhost" method="post" name="name1">
    今日反馈:
    <textarea cols="50" rows="5">cols 是规定一行的字数,rows是规定显示的行数,多出的行数需要滚动条滑动
    </textarea>
</form>

img

CSS

HTML中引入CSS的方式

  • 内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例:

<div style="background: red"></div>

这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div> 拥有相同的样式,你不得不重复地为每个 <div> 添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。

  • 嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例:

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。

  • 链接方式

链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。

示例:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。

  • 导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例:

<style>
    @import url(style.css);
</style>

CSS选择器

基础选择器(由单个选择器组成):标签选择器、类选择器、id选择器和通配符选择器

  • 标签选择器:html标签名作为选择器,选中页面中所有的此标签。

  • 类选择器:选中所有相同类的标签。(需要在html标签中加上类名,多个类名之间用空格隔开)
    语法:

.类名 {

}
  • id选择器:选中所有相同id的标签。(需要在html标签上加上id)
    语法:
#id名 {

} 
  • 通配符选择器:使用*定义,它表示选取页面中所有元素(标签)。
    语法:
* {


}

复合选择器

  • 后代选择器
    又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法:

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2(后代元素)。

例如:

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1和元素2中间用空格隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

  • 子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

语法:

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。

例如:

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1和元素2中间用大于号隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2必须是亲儿子,其孙子、重孙之类都不归他管,你也可以叫他 亲儿子选择器

  • 并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。

语法:

元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和 元素2。

例如:

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和 元素2 中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

  • 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

因为伪类选择器很多,比如有链接伪类、结构伪类等。

链接伪类选择器

链接伪类选择器注意事项:

  1. 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。

  2. 记忆法:love hate 或者 lv 包包 hao 。

  3. 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

例如:

/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标,一般情况 <input> 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

例如:

input:focus {
background-color:yellow;
}

CSS字体属性:

  • CSS字体复合属性
font: font-style font-weight font-size/line-height font-family;

注意: 以上顺序不可变,必须严格遵守。不需要设置的属性可以省略(系统会取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

  • CSS字体属性总结
    img

CSS文本属性

  • 装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
img

  • 文本缩进
    text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。正值是缩进,负值是突出。

这边有一个常用的单位:em
em是一个相对单位,就是当前元素(font-size)一个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。

示例:

p {
    text-indent: 20px;
}

  • 行间距
    line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.

  • 文本属性总结
    img

标签:标签,元素,cell,HTML,随笔,选择器,CSS,row
From: https://www.cnblogs.com/victoryhan/p/17071142.html

相关文章

  • htmlunit 模拟登入、点击、获取页面信息
    本文介绍了htmlunit模拟登入、点击、获取页面信息的demopublicstaticStringgetHtml(Stringurl){System.out.println("****************开始执行****************");//模拟一个浏览器@SuppressWarnings("resource")WebClientwebClien......
  • Css实现浏览滚动条效果
    Css实现浏览滚动条效果前言也是有大半个月没有更新文章了,大部分时间都在玩,然后就是入职的事。今天就更新一个小知识,刷抖音的时候看到的,感觉还不错。属性介绍关键属性animation-timeline:动画名称;用于控制动画的时间轴。它可以让你在一个元素上同时播放多个动画,控制它们的开......
  • HTML图片和文本居中对齐
    原理比较简单就不上图片了你也许听说过在行元素中使用vertical-align:middle;可以实现居中对其,但实际使用上,常常没有作用。其实行元素有四条线分别是:顶线中线基线底线默认行元素是基线对齐的(两个元素的基线在同一高度)下面代码相当于图片的基线和文字的中线对齐(图片的......
  • java——redis随笔——实战——短信登录
    前言: 此章节用到的知识点:mybatisPlus ;参考网址:https://www.bilibili.com/video/BV1Xu411A7tL?p=7&vd_source=79bbd5b76bfd74c2ef1501653cee29d6  正常新建一个接口: 再新建这个接口的实现类:  修改接口: 修改实现类:  然后就可以注入并使用了:   ......
  • 【HTML专栏3】!DOCTYPE、lang、字符集的作用
    本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,详细介绍HTML/CSS如果使用,如果对你有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。博客主页:DuckBro博客主页系列专栏:HTML/CSS专栏关注博主,后期持续更新系列文章如果有错误感谢大家批评指出,一定及时修改感谢......
  • 【HTML专栏1】语法规范、基础结构标签
    本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,详细介绍HTML/CSS如果使用,如果对你有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。博客主页:DuckBro博客主页系列专栏:HTML/CSS专栏关注博主,后期持续更新系列文章如果有错误感谢大家批评指出,一定及时修改感谢......
  • 【HTML/CSS】入门导学篇
    博客主页:DuckBro博客主页系列专栏:HTML/CSS专栏关注博主,后期持续更新系列文章如果有错误感谢大家批评指出,一定及时修改感谢大家点赞......
  • CSS 基础 5 - CSS 选择器
    基础#id{}ID选择器.class{}类选择器tag{}标签选择器,tag可以是h1,p,div,span,img,nav,footer...*{}通用选择器,选择所有元素,可以和其他复杂选择器组合<divclass="class1class2"id="my-id"></div>注:每个元素可以有多个类,例如上面的HTML,在CSS中......
  • HTML emoji整理 表情符号
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>测试</title></head><body><divstyle="font-size:50px;">......
  • HTML+JavaScript+CSS DIY 分隔条splitter
    一、需求分析现在电脑的屏幕越来越大,为了利用好宽屏,我们在设计系统UI时喜欢在左侧放个菜单或选项面板,在右边显示与菜单或选项对应的内容,两者之间用分隔条splitter来间隔,并可以通过拖动分隔条splitter来动态调研左右两边的宽度。要在网页上实现这种UI界面,也有不少现成的组件,比如jQue......