html笔记

最新推荐文章于 2025-07-24 17:35:32 发布

原创最新推荐文章于 2025-07-24 17:35:32 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #笔记 #java

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、图像、链接、表格等元素，以及CSS的引入方式和基础选择器概念，如类选择器、ID选择器、属性选择器等，还涉及了字体样式设计和媒体元素的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

c: client 客户端

b:browser 浏览器

s:server 服务器

标签可以嵌套

html的骨架：

html：超文本标记语言

<html>

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

<body>


</body>

</html>

属性名=“属性值”

属性名与属性值相同，只写属性名

<!.-- 注释 -->

<开始标签>标签体（内容）</结束标签>
<p>内容</p>                   换行符（有空格）
</br>                        换行符（仅换行）
<hr />                       水平下划线
<h1> 内容 </h1>               1-6级逐渐变
<marquee>                    左右滑动
<marquee loop="1" >          循环一次
</input>                     线框
<strong>                     加粗
<b>内容</b>                   加粗
<em>内容</em>                 倾斜
<i>内容</i>                   倾斜
<del>内容</del>               删除线
<s>内容</s>                   删除线    
<ins>内容</ins>               下划线
<u>内容</u>                   下划线

无语意标签


<div>内容</div>                独占一行（多用于布局）

<span>内容</span>               一行可存在多个内容，不独占一行

音频标签

<audio src="" controls muted autoplay loop></audio>

图片标签

<img src="">               
src：指向图片位置
title：鼠标经过时显示的图片备注
alt：图片地址发生错误时用来提示的文字
border:边框
height：高度
width：宽度

视频标签

<video src="" controls autoplay muted poster>
controls:控件
autoplay:自动播放
muted:静音播放
poster:

超链接

<a href="" target="">内容</a>
href：跳转的位置
target:打开方式，默认：_self  
    新窗口打开：target="_blank"



锚链接
<div id="one">内容</div>

有序列表
<ol type="">    默认是数字顺序
     <li>内容</li>
     <li>内容</li>
     <li>内容</li>
</ol>

无序列表
<ul type="">

框架标签
<iframe src=""></iframe>

元素显示模式

块元素：独占一行典型：div 宽、高、内外边距都可以设置

行内元素：一行可以存在多个典型：span 宽、高、内外边距不可以设置

行内块元素：一行可以存在多个，也可以设置宽、高、内外边距。典型：input

表格标签

<table>
<caption>学生信息</caption>     （表头）
<thead>
<tr>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
     <th>民族</th>
     <th>政治面貌</th>
</tr>     
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
<tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
<tr><tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
<tr><tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
<tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
<tr>
</tfoot>
</table>

table：border(只控制最外层大小)
       width(全部改变)
       height(改变tbody，tbody是底线只高不低)
 thead：height
        align="center(水平居中)   left(左对齐)   right(右对齐)"
        valign="middle(垂直居中)   bottom(底部) "
  tbody:height
        align
        valign
  tfoot:height
        align
        valign
  tr:   height
        align
        valign

合并单元格

跨行
<td rowspan="2"></td>
跨列
<td colspan="5"></td>

详情标签（配合summary标签用）

<details>
<summary>有志青年</summary>
我们这里都是有志青年
<details>

tabindex：让本不能tab遍历获取焦点的元素可以获取 ，可以为负数，0，正数

表单基本结构

表单的用途：网页交互区，收集用户信息

<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交<button>
</form>

method:提交方式
action:将数据提交给谁处理（提交到自己的页面用“#”）
input的属性：
name:必有属性
radio:单选框
checkbox：多选框
hidden：隐藏域
submit：确认按钮,提交按钮
reset:重置按钮
button:普通按钮（无作用）
value:值，用于赋予具体的值，单选和多选标签必须得加value
maxlength:最大长度

常见的表单元素

<form action="#">
用户名：<input type="text" name="user" value="cxk"><br/>
密码：<input type="password" name="pwd">
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br/>
你喜欢的明猩是？<br/>
<input type="checkbox" name="cxk" id="caixukun"><label for="caixukun">蔡徐坤
<label><input type="checkbox" name="dz">丁真</label>
<input type="submit" >
<input type="reset">
</form>

文本域

<textarea cols="200" rows="10"></textarea>

下拉菜单

<select name="jiguan" id="">
<option value="蔡徐坤">蔡徐坤</option>
<option value="丁真">丁真</option>
<option value="芙蓉王源">芙蓉王源</option>
</selcet>

html得全局属性

id身份证号，在一个页面中只能出现一次
class：同一类，可以存在多个
<button accesskey="enter"></button>
accessskey:设置快捷键为enter
data-*()：自定义属性

提示词：placeholder
eg:用户名：<input type="text" name="user" value="" placeholder="请输入用户名"><br/>

CSS

css的三种引入方式：

内部样式：
<style>
.box1{
width:300px;
height:800px;
background-color:pink;
}
</style>

css基本结构
选择器{
    属性名： 属性值；
    属性名： 属性值；
}
1.标签选择器，选择所有的p标签
p{
color：aqua;
}

2.id选择器："#"加id名
#box1{                    
color:pink
}

3.类选择器："."加类名
.box2{
color:pink
}

4.通配符选择器：选中所有的标签
*{
color:ping
}

子代选择器,选择亲生儿子
<style>
.a>li{
background-color:pink;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
</ul>
</body>

后代选择器，找到后代所有要找的元素
.a li{
color:pink;
}


复合选择器：逗号选择器，可以把多个元素选择出来加相同的样式
div,
p,
span{
color:red
}

属性选择器：
1.选择type值为"password"的值的标签
input[type="password"]{
background-color:red;
}

2.选择有id的div标签
div[id]{  
width:300px;
height:300px
color:blue;
}

3.以"te"开头
input[type^="te"]{
background-color:red;
}
4.以"l"结尾
input[type$="l"]{
background-color:red;
}
5.type值里边包含"e"
input[type*="e"]{
background-color:red;
}

字体样式设计

<style>
    div{
    cursor:pointer
        font-size: 40px;
        font-weight: 900px;
    }
    </style>
</head>
<body>
    <div>我是真ikun</div>
</body>

正常大小为400px，100-900为逐渐递增。

文本首行缩进
text-indent:2em;
em:表示当前字体大小