html基础-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>声明标签告诉我们是以html显示

<html lang="en">告诉我们这是有关英文网站，但是在里面我们可以写中文英文，显示的时候回显示我们所写的语言

chaeset = 字符编码，很恶心的东西

所有的标签都是有始有终的即前面有一个什么，后面就会有一个/什么

标题标签与文本格式化标签

标题标签与文本格式化标签
<body>
    <h1>我是<strong>加粗</strong>的文字</h1>
    <h1>我是<b>加粗</b>的文字</h1>
    <h1>我是<em>倾斜</em>的文字</h1>
    <h1>我是<i>倾斜</i>的文字</h1>
    <h1>我是<del>删除线</del></h1>
</body>
从1到6重要性依次递减

段落标签


<p>hxiaogang</p>
<p>hxiaogangzuishuai</p>
段落标签可以把文章分成不同段落，段落和段落之间会有空隙

换行标签
<br/>
单标签，简单的开始新的一行，与段落标签不同，分开后没有空隙

图像标签

<img src="hxiaogang.jpg"/>
用这样的代码可以将图片直接插入进去，scr之后的图像路径可以是相对路径也可以是绝对路径

图像属性（可以用key="values"的形式）
如果加了alt="",在图片不存在或者路径输错时，回用后面的文字替换
    <img src="hxiaogang.jpg" alt = "hxiaogang最帅"/>
如果后面加了title="",在鼠标指向网页的图片上时，鼠标上会显示后面的内容
    <img src="hxiaogang.jpg" title="hxiaogang最帅"/>
图像标签后面还可以加上以下来调整图片
width 图像宽度
height 图像高度
border 图像边框粗细

超链接标签

内部链接

外部链接
<a href="https://www.baidu.com" target="_blank">详细请点击</a>
这样可以连接到外部的网站
里面的target属性，如果里面是_blank则你点击你的超链接以后是新打开你跳转的页面
如果里面是_self则是当前页面直接跳转，默认值是_self

外部链接

内部链接
<a href="hxiaogang最帅.html" target="_blank">页面源代码</a>
注意如果你要超链接的文件是在当前目录下则直接可以输入文件名，如果在上一级可以用../,但如果跟你的文件夹没有任何关系得使用绝对路径

锚点标签

锚点标签指在同一页面跳转，假如你要查看hxiaogang的早年经历，在目录中点击早年经历，就会定位到底下详细的内容
你先要在目录中就要加入这样的超链接，并且要在href=后面加一个#，并且要自定义一个标题，例如jinli

在后面的主要文字叙述下也要写入id并且id要与定义的href相同
<a href="#jinli">早年经历</a>
<h4 id="jinli">早年经历</h4>

超链接标签不止可以是网页元素，还可以是文本，图像，表格，音频，视频都可以

如果href里面的地址是一个文件或者压缩包，则会下载这个文件

表格标签

基本用法

<body>
    <table>
        <tr>
            <td>单元格内文字</td>
            <td>单元格内文字</td>
        </tr>
    </table>
</body>

表头单元格标签

<body>
    <table>
        <tr>
            <th>单元格内文字</th>
                   ...
        </tr>
    </table>
</body>

表格属性

<table align="center" border="1" cellpadding="20" width="500" cellspacing="0">

align 规定元素的对其方式 center left right
border 是否拥有边框   1或""
cellpadding 内容与边框间空白的大小
cellspacing  单元格之间的空白
width 表格宽度

表结构标签

<thead> 将表格的表头放到里面 </thead>
<tbody> 将表格的主题放入     </tbody>

合并单元格

1.先确定是跨行还是跨列
2.找到目标单元格，写上合并方式="合并单元格的数量"  
3.删除多余的单元格

跨行合并 rowspan="合并单元格的格数"
跨列合并 colspan="合并单元格的格数"

列表标签

无序列表

<body>
    <h4>你喜欢的食物</h4>
    <ul>
        <li>liulian</li>
        <li>choudoufu</li>
    </ul>
</body>

li标签必须放到ul标签里

li标签里只能放li标签

无序标签没有顺序之分

有序标签

<body>
    <h4>fensipaihangbang</h4>
    <ol>
        <li>hu 300</li>
        <li>hu 100</li>
    </ol>
</body>

有序标签会自动加上顺序，但在实际使用时通常使用css

自定义标签

<dl>
    <dt>名词1<dt>
    <dd>名词1解释2</dd>
    <dd>名词2解释2</dd>
</dl>

<dl>中只能包含<dt><dd>

<dt><dd>没有个数限制，一个<dt>对应多个<dd>

表单标签

<from>
    用户名： <input type="text" name="username"> <br/>
    密码： <input type="password" name="pwd"><br/>
    性别： 男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br/>
    爱好:喝酒<input type="checkbox"> 干饭<input type="checkbox">打麻将<input type="checkbox"
   
    <input type="submit"><br/>
    <input type="reset" value="重新填写"><br/>
    <input type="button" value="获取短信验证码"><br/>
    上传头像<input type="file"><br/>
</from>

<!-- 只要鼠标点击用户名有关部分光标就可以之间输入，增加用户体验感 类似于锚点标签 -->
<label for="text"> 用户名：</label> <input type="text" id="text">

<!-- radio是点选按钮，可以实现单选 checkbox实现多选 -->
<!-- name 表单元素的名字，相同就帮你多选 -->
<!-- value 规定input元素的值 -->
<!-- checked 当页面打开就默认选中某个值 checked=“checked”-->
<!-- maxlength 输入字符的最大长度 -->
<!-- button 普通按钮，后期配合js使用 -->

查看输出效果

select标签

出现下拉菜单

<body>
    籍贯：
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">山东</option>
    </select>
</body>

文本域标签

输入多文字

<body>
    <from>
        备注：
        <textarea cols="50" rows="5">
            ......
        </textarea>
    </from>
</body>