html基础入门

最新推荐文章于 2023-11-24 18:39:44 发布

原创最新推荐文章于 2023-11-24 18:39:44 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

1 篇文章

订阅专栏

转载请注明链接：https://blog.youkuaiyun.com/feather_wch/article/details/79793596

1、html分为head和body标签

2、head标签存放标题以及meta数据,meta可以存放关键字、作者等数据

3、body存放网页主体内容

4、换行的几种方法？

<br/>标签
<p>hello world<p/>,段落标签-上下都会空一行。
<h1>hello<h1/>等标题标签也会换行

5、标题标签(6级)

<h1>hello<h1/>
  <h2>hello<h2/>
    <h3>hello<h3/>
      <h4>hello<h4/>
        <h5>hello<h5/>
          <h6>hello<h6/>

6、有序列表

<ul>
    <li>剧集</li>
    <li>电影</li>
    <li>综艺</li>
    <li>动漫</li>
    <li>娱乐</li>
</ul>

7、无序列表

<ol>
    <li>剧集</li>
    <li>电影</li>
    <li>综艺</li>
    <li>动漫</li>
    <li>娱乐</li>
</ol>

8、列表的子标签li可以作为布局(内部嵌套标题、列表等等)

<ul>
    <li>
        <h1>剧集</h1>
        <ul>
            <li>动作片</li>
            <li>剧情片</li>
            <li>动画片</li>
        </ul>
    </li>
    <li>
        <h1>电影</h1>
        <ul>
            <li>战狼</li>
            <li>头号玩家</li>
        </ul>
    </li>
</ul>

9、xhtml中的列表

<dl>
    <dt>我是XHTML中dt的title</dt>
    <dd>纪实</dd>
    <dd>公益</dd>
    <dd>体育</dd>
</dl>

html中用下列代码可以实现相同效果：

<h1>
    我是HTML中的title
</h1>
<ul>
    <li>纪实</li>
    <li>公益</li>
    <li>体育</li>
</ul>

10、html中的注释

<!-- 我是注释 -->

11、html中<pre></pre>标签显示代码段

<pre>
    public class Person{
        String name;
        int age;
        boolean sex;
    }
</pre>

12、html中特殊的符号需要转义字符

字符	转义字符
<	`<`
>	`>`
空格	` `
拷贝权限符号： ©	`&copy`
&	`&`

13、超链接<a></a>标签

<a href="https://www.baidu.com/"
   target="_blank"
   title="鼠标悬浮在文字上时的提示语">这是“百度一下”的超链接</a>

超链接标签也可以作为父布局去放置img等标签

14、跑马灯标签: <marquee></marquee>

<marquee
        direction="right"
        scrollamount="5"
        onmouseover="this.stop()"
        onmouseout="this.start()">
    这是一个弹弹弹的垃圾控件
</marquee>

marquee标签也可以作为父布局去放置img等标签

15、图片标签

<img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2510956726.webp"
     width="300"
     height="400"
     alt="图片没有加载时显示的内容"
     title="鼠标悬浮在图片上时显示的标题">

16、表格table、tr、td标签

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
    </tr>
    <tr>
        <td>G</td>
        <td colspan="2">H</td>
    </tr>
</table>

复杂页面用table扩展性太差，最好的办法是使用div标签+css

17、布局标签div的作用

容器, 类似于Android中的父布局
span标签是作为文本的容器，可以对文本进行定位。

<div>
    <ul>
        <li>
            <h1>剧集</h1>
            <ul>
                <li>动作片</li>
                <li>剧情片</li>
                <li>动画片</li>
            </ul>
        </li>
        <li>
            <h1>电影</h1>
            <ul>
                <li>战狼</li>
                <li>头号玩家</li>
            </ul>
        </li>
    </ul>
    <span>
          span标签
    </span>
</div>

18、html中表单是什么意思？

表单的英文为form
html表单是用于收集不同类型的用户输入。

<form action="https://blog.youkuaiyun.com/feather_wch">
    用户名: <input type="text"><br/>
    <input type="submit"><br/>
    注册：<input type="button" value="Button">
</form>

提交或者回车后会进入action指明的页面中。

19、表单中的单选框

name属性进行分组。

<form>
    性别:<input type="radio" value="男" name="sex">男
    <input type="radio" value="女" name="sex">女
</form>

20、表单的多选框

<form>
    城市:<input type="checkbox" value="sh" name="city">上海
    <input type="checkbox" value="bj" name="city">北京
    <input type="checkbox" value="nj" name="city">南京
    <input type="checkbox" value="sz" name="city">深圳
</form>

21、下拉框

<form>
    月份:<select>
      <option value="1">Ja</option>
      <option value="2">Fe</option>
      <option value="3">Ma</option>
      <option value="4">Ap</option>
    </select>
</form>

22、多文本输入

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