一,前端概念
html 做网页的骨架
CSS渲染骨架
js 让页面动起来
二,html概念和第一个html
超文本标记语言,专门用来制作网络页面
语法:
<标签>被标记内容</标签>
<标签/>图片
1 <!DOCTYPE html><!--html5的标准--> 2 <html lang="en"><!--html标签--> 3 <head><!--网页头信息--> 4 <meta charset="UTF-8"> 5 <title>第一个网站</title><!--网站的标题,显示在网页选项卡--> 6 </head> 7 <body><!--网页主题,给用户展示的内容--> 8 hello world 9 </body> 10 </html>
三,HTML常用标签(了解)
h标题
h1->h6 默认加粗效果,号越大,字越小
<h1 align="center">被修饰内容</h1>
p 段落
<p>段落</p>
会产生段间距
<hr/> 长的分割线
<!DOCTYPE html><!--html5的标准--> <html lang="en"><!--html标签--> <head><!--网页头信息--> <meta charset="UTF-8"> <title>第一个网站</title><!--网站的标题,显示在网页选项卡--> </head> <body><!--网页主题,给用户展示的内容--> hello world <hr> <h1 align="center">大家好我是陈冠希</h1> <p align="center">大家好我是阿娇</p> <p align="center">大家好我是张柏芝</p> <p align="center">大家好我是谢霆锋</p> <hr> </body> </html>
<i>斜体
<u>下划线
<s>删除
<b>加粗
a<sub>n</sub>下标
a<sup>n</sup>上标
<br/>换行符
空格 转义字符
<; 小于号
>; 大于号
© 版权符号
4.超链接
a 超链接
<a href="跳转网页链接" target="self">能看到的内容</a>
target="_blank"
设置锚点 跳转到当前页面的某个锚点位置
<a name="top">去上面</a>
<a href="#top"></a>
5.图片
<img src=" 路径" alt=" " title="" width="">
6.排版 表格
table 表格
tr 行
td 列(单元格)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="80%" align="center"> <tr> <td>id</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> <tr> <td>1</td> <td>孙悟空</td> <td>600</td> <td>操作</td> </tr><tr> <td>2</td> <td>猪八戒</td> <td>35</td> <td>操作</td> </tr><tr> <td>3</td> <td>唐僧</td> <td>1</td> <td>操作</td> </tr><tr> <td>5</td> <td>五</td> <td>65</td> <td>操作</td> </tr> </table> </body> </html>
table>tr*3>td*5 tab
6合并单元格
rowspan cowspan