html学习笔记 - 码农知识堂

html学习笔记
1.在idea里右键创建html文件
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

body>
html>
1
2
3
4
5
6
7
8
9
10
```
在谷歌浏览器中输入chrome://version可以看到可执行浏览器的路径，把这个路径复制下来提交给idea即可

2.h1-h6标签可以指定文字的大小，通过aligen标签可以指定文本的位置
```
<h1 align="center">hello worldh1>
1
```
3.
标签可以划线,一些无实体的标签比如标签不像一般标签是成对出现的
```
<hr width="500" color="red" size="5"/>
1
```
4.font标签可以指定字体，不过由于css的出现其实已经淘汰了
```
testfont>
1
```
5.无实体标签用于换行,标签用于加粗，标签用于斜体，
标签用于分段

6.span标签用于创造一个不换行的容器，可以在其中定义需要的元素，并可以通过br手动换行。div标签也是容器标签，和span不一样的是span有换行标签，用于写块级元素,即小范围用span,大范围用div
```
<span style = "color:green;font-size:medium;font-family:楷书"> test2span>
1
```
font-style:italic也可以达到斜体的效果，font-weight:bolder用于加粗的效果

7.ol和ul可以创建有序列表和无序列表
```
<ol>
<li>1
<li>2
ol>
<ul>
<li>1
<li>2
ul>
1
2
3
4
5
6
7
8
```
8.特殊符号以&开头，以分号结尾，如表示空格
9.在head部分，可以通过style标签配合{}符号来构建选择器，一次性对符合条件的元素进行格式定义（如果和span自己定义的格式冲突了，那么会根据就近原则，使用span自己的标签）
```
<style>
    span{
    color:red;
    }
style>
1
2
3
4
5
```
10.通过img标签可以插入图片
```
<img src="http:图片的链接" alt="代替丢失的文字" height="高度"  width="宽度">
1
```
11.a标签可以实现网页跳转
```
<a href="md?articleId=128112099">跳转a>
1
```
除了跳转网页以外，也可以跳转到设置的锚点，
```
<a href="#base">锚点a>
<h1 name="base">this is baseh1>
1
2
```
可以加上target=“_blank"来设置链接打开新的标签，默认是”_self",即覆盖在原有网页上
```
<a href="xxx" target="_blank">a>
1
```
12.设置表格，tr标签表示一行，th标签是表格列表签，自动居中,td是普通的单元格(默认靠左对齐)
```
<table width="500" border="2">
<caption>设置标题caption>
<tr>
<th>hihith>
<th>ssth>
tr>
<tr>
<td>sadasdtd>
<td>11td>
tr>
table>
1
2
3
4
5
6
7
8
9
10
11
```
可以通过选择器选择所有的td元素来使它们进行居中对齐
```
<style>
td{
text-align:center;
}
style>
1
2
3
4
5
```
如果需要跨行，可以在td标签中设置rowspan,如果需要跨列则设置colspan,注意宽行的话需删除下一行的td内容以防表错乱。
```
<td rowspan="2">跨两行td>
1
```
也可以用,表格包裹起来，作为逻辑上的表格头和表格主题，即使没有写tbody,浏览器也会自动生成

13.表单
```
<form action="提交的地址" method="post">
用户名:<input name="username" type="txt"placeholder="请输密码"><br/>
密码:<input name="password" type="password">
    <input type="submit">
form>
1
2
3
4
5
```
method指定是post方式还是get方式提交

CSS部分：
1.css相当于把样式的定义卸载了外部，需要导入的时候，在head部分指定即可
```
<head>
<link href="css/table.css" rel="stylesheet">
head>
1
2
3
```
2.css的三种选择器，元素选择器，id选择器，类选择器
元素选择器：选中对应元素
```
div{color:red;}
1
```
id选择器：通过id名字来选中
```
#myname{:color:red;}
<div id="myname">hidiv>
1
2
```
类选择器
```
.cls{color:red;}
<div class="cls">hellodev>
1
2
```
优先级是id选择器>类选择器>标签选择器

3.常用样式

附件:html开发手册以及素材
链接：https://pan.baidu.com/s/1uyae9ONeyUGUcoJ5yxykEw?pwd=9y0b
提取码：9y0b

相关阅读:
【C++】类和对象——构造函数和析构函数
字符串函数和内存函数详解（2）
dubbo 2.5.3 环境搭建
3.15作业
单例模式与反射创建对象
redis持久化之RDB
ComfyUI搭建
iOS 提取图片中的文字
hyperf的启动源码分析(二)——请求如何到达控制器
vue2 集成 - 超图 - SuperMap iClient3D for WebGL 及常用方法

原文地址：https://blog.csdn.net/qq_43199509/article/details/128112099