html学习记录(1)

1.基本框架和基本标签

前言:由于学校不开学在家摆太久了()所以开始学习

DOCTYPE html>
    <html>
    <head>
        <title>cjmdyltitle>
    head>
    <body>
    
    <meta name="keywords" content="html">
    <meta name="description" content="cjmdyl">
    <h1>helloworldh1>
    <h2>helloworldh2>
    <strong>cjmdylstrong>
    <br>
    <em>aem>
    ©
    >
    <
    <p1>cjmdylp1>
    <hr>
    body>
    html>

html学习记录(1)_第1张图片

2 图像标签

<img src="../resources/image/2.jpg" alt="acm" title="悬停文字" width="600" height="600">
     

html学习记录(1)_第2张图片

3.超链接标签

<a href="博客1.html" target="_blank">点我跳转a>

<br>
<a href="博客1.html" target="_self">
    <img src="../resources/image/2.jpg" alt="acm" title="悬停文字" width="600" heigtht="600">
a>

4.锚链接

<a name="top">a>
<a href="#top">回到顶部a>

<a href="博客1.html#top">回到顶部a>

5.邮件链接


<a href="mailto:[email protected]">点击联系我a>
   

6.块元素和行内元素

块元素:

独占一行的元素如(p,h1-h6)

行内元素:

可以排在一行内的元素(strong,em)

7.列表

1.有序列表:

用ol表示有序号,li为内容

<ol>
    <li>javali>
    <li>pythonli>
    <li>运输li>
    <li>前端li>
    <li>cli>
ol>

效果如图:html学习记录(1)_第3张图片

2.无序列表:

用ul表示,文字前面为点

   <p>
    <ul>
    	<li>javali>
    	<li>pythonli>
    	<li>运输li>
    	<li>前端li>
   		<li>cli>
    ul>
   p>

html学习记录(1)_第4张图片

3.自定义列表:

用dl表示自定义列表,dt为列表名称可以让这段内容更有层次,dd为列表内容

<dl>
    <dt>学科dt>
    <dd>javadd>
    <dd>pythondd>
    <dd>运输dd>
    <dd>前端dd>
    <dd>cdd>
dl>

效果如图

html学习记录(1)_第5张图片

8.表格标签

1.table 为表格标签,在表格中加border会有边框可以设置边框宽度,tr为行,td为列

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        <td>1-5</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>

2.跨行标签:

用rowspan代表合并行,用colspan表示合并列

<table border="1px">
    <tr>
        <td rowspan="4">1-1td>
        <td>1-2td>
        <td>1-3td>
        <td>1-4td>
        <td>1-5td>
    tr>
    <tr>
        <td colspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
        <td>2-4td>
        <td>2-5td>
    tr>
table>

效果如图:

html学习记录(1)_第6张图片

9.媒体元素

1.视频:

用video表示视频,src代表视频地址,controls为播放按键 加autoplay可以自动播放
如果加了auto不能自动播放,原因可能是chrome 66以上的版本为了避免多媒体标签产生随机噪音,规定了不为静音的标签不能自动播放,
需手动触发开始播放,或标签定义为静音(在src前加一个muted)才可以

<video  muted src="../resources/video/a.mp4" controls autoplay>
video>

2.音频:

<audio src="../resources/audio/a.mp3" controls autoplay>
audio>

10.页面结构分析

1.header表示头部

2.section表示网页主体

2.footer表示网页脚部

你可能感兴趣的:(学习,html)